0
149
VistasHow to use onDoubleClick on MUI TextField?
I want to select the text in the input field whenever the user double clicks the input field, I have made a function for this which is,
export const selectText = (
event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>
): void => {
event.currentTarget.select();
};
But how to I use it on mui Text Field, there are no props for onDoubleClick in mui documentation. I I simply send a prop
<TextField
id={id}
name={name}
value={value}
onDoubleClick={selectText}
/>
I get this error,
(I am trying to select numbers on double click not text.)
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You can attach it in inputProps to the native input element (that is rendered inside the TextField).
<TextField
id={id}
name={name}
value={value}
inputProps={{
onDoubleClick: selectText
}}
/>
·
Juan Pablo Isaza
Denunciar
0
If you want to know when the user double click:
<TextField onDoubleClick={() => console.log('double click')} />
If you only want double click without having to listen to the single click event:
<TextField onClick={(e) => e.detail === 2 && console.log('double click only')} />
Live Demo
·
Juan Pablo Isaza
Denunciar
Responde la pregunta