NumberField - How to prevent focus on input when increment/decrement

[gamellis]

I'm working with the number field component as a product quantity UI element. I expect people to add one or two products. When incrementing, the focus shifts to the input field, which is fabulous on a desktop. However, on mobile, it opens the number pad, which, in my case, isn't helpful.

I haven't found a way to prevent the focus from switching. Is there an expected way to change this behaviour? If not, are there any suggested pathways? I hope not to use the useNumberField hook, but I understand that might be the answer. 😅 I want to take advantage of all the fantastic work in the component.

Many thanks for all your advice

[snowystinger]

What mobile device are you on? I'm not seeing it open the number pad on my iPhone

Or am I doing something different?

trim.A4E4166A-7A4A-4A2C-8CB0-B94A20066AA3.MOV

[gamellis]

I'm embarrassed. I made a flawed assumption about the autofocus prop. I thought it wouldn't focus on mobile input and didn't simplify my code enough to see what you demonstrated above. 😅

I'm switching between a button to add the first quantity to the cart and then rendering the number field to control afterward. I thought the autofocus would be perfect for moving the focus to the newly rendered number field, but I did not realize how that would affect mobile.

[gamellis]

One more comment: I had to do accessibility work on our web app before RAC came out, and it was super painful. The work often arrived at a dead end with no "acceptable" answer. I've been grateful for RAC and all the outstanding work and benefitted so much. Thank you so much.