Estoy implementando un componente de reacción que formatea un número de 9 dígitos como un número de seguro social en el formato: xxx-xx-xxxx.

Desafortunadamente, no puedo seleccionar todo (ctrl + a) y eliminar el ssn, probablemente debido a mi función "keyup" en el controlador de clic handleSSN(). El atributo "valor" del componente Entrada toma el número de nueve dígitos que ingresa el usuario, y la función formatSSN() formatea el número para que aparezca como "xxx-xx-xxxx" en el campo de entrada. Cuando un usuario intenta seleccionar todo y eliminar lo que ingresó en el campo, el contenido resaltado simplemente dejará de estar resaltado cuando el usuario levante la tecla. ¿Hay alguna manera de acomodar el comportamiento "ctrl + a" en este controlador?

Esta funcionalidad se basa en gran medida en: http://jsfiddle.net/hughdidit/Y5SK6/ , que tiene el mismo problema de no poder "ctrl+ a" el cuadro de entrada y eliminar el contenido. Cualquier idea es muy apreciada

 <FormLabel clear="both" float="left"> Social Security Number: </FormLabel> <Input data-testId="ssn-input" border="1px solid #E2E8F0" background="#FFFFFF" borderRadius="4px" placeholder="Text here" color="grey.900" value={formatSSN(userResponse)} onChange={(e) => handleChangeSSN(e.target)} onBlur={(e) => handleChangeSSN(e.target)}} />

función formatSSN (esto no tiene que ver con el problema en cuestión, pero es cómo se muestra el ssn en la entrada cuando se carga el componente, si ya hay un ssn en la base de datos):

 export const formatSocialSecurity = (val) => { val = val && val.replace(/\D/g, ''); val = val && val.replace(/^(\d{3})/, '$1-'); val = val && val.replace(/-(\d{2})/, '-$1-'); val = val && val.replace(/(\d)-(\d{4}).*/, '$1-$2'); return val; };

La función del controlador de clics handleSSN() guarda el valor en el estado (no se muestra a continuación) después de realizar algunas validaciones:

 const handleChangeSsn = ({ value }) => { var keyCode = value.which || value.keyCode || 0; console.log(keyCode); document .getElementById('ssn-input') .addEventListener('keyup', function (event) { let val = this.value.replace(/\D/g, ''); let newVal = ''; if (val.length > 4) { this.value = val; } if (val.length > 3 && val.length < 6) { newVal += val.substr(0, 3) + '-'; val = val.substr(3); } if (val.length > 5) { newVal += val.substr(0, 3) + '-'; newVal += val.substr(3, 2) + '-'; val = val.substr(5); } newVal += val; this.value = newVal; });