CODEWITHSUNDEEP
javascripthtmlcssreactjsvue.js
Mohammad ILA
Mohammad ILA

Reputation: 17

prevent open mobile keyboard automatically when input focused

I want to prevent open mobile keyboard automatically when input focused. but I want input focused because I'm using MUI for my react app and when TextField component focused its ui changed. I want this change but I don't want to open mobile keyboard automatically when the condition is true for input focus.

<TextField focused={mode === 2} />

Mode is a state that when it equals to 2, this ui TextField should change to focus mode ui but I don't want to mobile keyboard opened automatically.

When user click on this TextField I want to open keyboard not when mode state equals to 2

I tried to use preventDefault but it doesn't work.

<TextField focused={mode === 2} onFocus={(e) => e.preventDefault()} />

Upvotes: 0

Views: 1758

Answers (1)

Mohammad ILA
Mohammad ILA

Reputation: 17

finally, I found the answer.

I create two states one for focus and another for click. because when input is focused I want to change the UI but when the input is clicked I want to open the keyboard on mobile devices. Then:

const [inputNumber,setInputNumber]=useState(1) // to specify which input should focus
const [isReadOnly,setIsReadOnly]=useState(false) // to specify input which focused is clicked or not
<TextField focused={inputNumber===2} inputProps={{readOnly:isReadOnly}} onClick={()=>setIsReadOnly(false)} />

when inputNumber is set to 2, this TextField should be focused but we don't want to the mobile keyboard is opened automatically then isReadOnly prevents this for us. until we click on the input then isReadOnly set to false and input is focused => keyboard will open.

Upvotes: 0

Related Questions