[Vuejs]-Prevent open mobile keyboard automatically when input focused

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.