why is onChange parameter a string instead of event?

[daniellizik]

i'm trying to test pasting a E.164 formatted phone number into the input with cypress, but forcefully dispatching an event in a test doesn't work because my application code expects onChange to work with a string, not an event

• https://gist.github.com/nickytonline/bcdef8ef00211b0faf7c7c0e7777aaf6
• https://stackoverflow.com/questions/60111777/paste-test-in-cypress-in-reactjs-project

my code generally looks like

const handleOnChange = (val: sstring) => {
  // stuff here
}

<ReactPhoneInput
  {...inputProps}
  defaultCountry={selectedCountry?.shortName as CountryCode}
  international
  countryCallingCodeEditable={false}
  type="tel"
  data-testid={inputProps['data-testid'] || PHONE_INPUT.INPUT}
  onChange={handleOnChange}
  onPaste={handleOnChange}
/>

and the test

describe('pasting a value', () => {
  it('should update the phone number and trigger onChange when pasting a value', () => {
    mount(<PhoneInput />);

    const E164_COMPLIANT_JP_PHONE_NUMBER = '+817012341234'

    cy.get('input[type="tel"]').paste(E164_COMPLIANT_JP_PHONE_NUMBER);
  });
});

[catamphetamine]

Hi. Is it correct that ‘onChange()’ does get called (and only once) but with an ‘event’ ratger than s ‘value’? Anx that’s the sole issue?

…

On Wed, 19 Feb 2025 at 00:51, Daniel Lizik ***@***.***> wrote: i'm trying to test pasting a E.164 formatted phone number into the input with cypress, but forcefully dispatching an event in a test doesn't work because my application code expects onChange to work with a string, not an event - https://gist.github.com/nickytonline/bcdef8ef00211b0faf7c7c0e7777aaf6 - https://stackoverflow.com/questions/60111777/paste-test-in-cypress-in-reactjs-project my code generally looks like const handleOnChange = (val: sstring) => { // stuff here} <ReactPhoneInput {...inputProps} defaultCountry={selectedCountry?.shortName as CountryCode} international countryCallingCodeEditable={false} type="tel" data-testid={inputProps['data-testid'] || PHONE_INPUT.INPUT} onChange={handleOnChange} onPaste={handleOnChange}/> and the test describe('pasting a value', () => { it('should update the phone number and trigger onChange when pasting a value', () => { mount(<PhoneInput />); const E164_COMPLIANT_JP_PHONE_NUMBER = '+817012341234' cy.get('input[type="tel"]').paste(E164_COMPLIANT_JP_PHONE_NUMBER); });}); — Reply to this email directly, view it on GitHub <#450>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADUP37ZYH7TDPXBNGDWKZ32QOTPZAVCNFSM6AAAAABXMVZXGSVHI2DSMVQWIX3LMV43ASLTON2WKOZSHA3DCNZQGE4DSMA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***> [image: daniellizik]*daniellizik* created an issue (catamphetamine/react-phone-number-input#450) <#450> i'm trying to test pasting a E.164 formatted phone number into the input with cypress, but forcefully dispatching an event in a test doesn't work because my application code expects onChange to work with a string, not an event - https://gist.github.com/nickytonline/bcdef8ef00211b0faf7c7c0e7777aaf6 - https://stackoverflow.com/questions/60111777/paste-test-in-cypress-in-reactjs-project my code generally looks like const handleOnChange = (val: sstring) => { // stuff here} <ReactPhoneInput {...inputProps} defaultCountry={selectedCountry?.shortName as CountryCode} international countryCallingCodeEditable={false} type="tel" data-testid={inputProps['data-testid'] || PHONE_INPUT.INPUT} onChange={handleOnChange} onPaste={handleOnChange}/> and the test describe('pasting a value', () => { it('should update the phone number and trigger onChange when pasting a value', () => { mount(<PhoneInput />); const E164_COMPLIANT_JP_PHONE_NUMBER = '+817012341234' cy.get('input[type="tel"]').paste(E164_COMPLIANT_JP_PHONE_NUMBER); });}); — Reply to this email directly, view it on GitHub <#450>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADUP37ZYH7TDPXBNGDWKZ32QOTPZAVCNFSM6AAAAABXMVZXGSVHI2DSMVQWIX3LMV43ASLTON2WKOZSHA3DCNZQGE4DSMA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>