Textfield with too small hit area

Question

laurentfromissy les moulineaux OP

Created Mar ’22

Replies 3

Boosts 1

Views 2.5k

Participants 3

Hello,

It's impossible to manage hit area for textfield and it's already too small by default (detected with Accessibility Inspector).

I'm tried to force with modifier "frame(minHeight: xxx)", the component change the height but the hit area is still in same size.

Have to tips to fix this issue?

Capture d’écran 2022-03-30 à 15.28.12.png

Answered by DTS Engineer in 855613022

Hello,

Long delay here, but this came up for me recently, figured I'd post the solution on the forums for all to benefit :)

The following approach will increase the hit-area of a view without the side-effects on layout:

TextField("Example", text: $text)
    .focused($isFocused)
    .contentShape(Rectangle().inset(by: -20)) // The negative inset on the content shape is key. This expands the content shape without affecting layout.
    .onTapGesture {
        isFocused = true
    }

Hope this helps others dealing with a similar issue!

--Greg

Boost

Answer 1

laurentfromissy les moulineaux OP

Mar ’22

Sample code here https://github.com/LaurentBnpp/IssueTextFieldAccessibility

0

Answer 2

Claude31 OP

Mar ’22

There doesn't seem to be any direct solution without UIViewRepresentable (which means turning around SwiftUI…).

https://stackoverflow.com/questions/56795712/swiftui-textfield-touchable-area

0

Answer 3

DTS Engineer OP

Apple

1w

Recommended

Hello,

Long delay here, but this came up for me recently, figured I'd post the solution on the forums for all to benefit :)

The following approach will increase the hit-area of a view without the side-effects on layout:

TextField("Example", text: $text)
    .focused($isFocused)
    .contentShape(Rectangle().inset(by: -20)) // The negative inset on the content shape is key. This expands the content shape without affecting layout.
    .onTapGesture {
        isFocused = true
    }

Hope this helps others dealing with a similar issue!

--Greg

0