I am trying to create a text input field with a calculation function. Using a component previously made for Photoshop, I noticed that for some reason it does not trigger the change event.
I need this event separate from the input event because I want the calculation to be performed the moment the user confirms the input or removes focus from the textfield.
Is there any way to force the change event to happen or alternatively achieve this purpose?
Thank you for your response, confirming that it does not work with sp-textfield.
I tried and onKeyUp responded, but onChange and onBlur were unresponsive. Is this your intended result? Or is onChange also working in your environment?
Now I’m using a similar approach to what you are doing with onKeyUp to get around the limitation. When onKeyDown and the key is Enter, Escape, or Tab, I do what onChange should to do.
sp-textfield is a custom tag and is implemented similar to a web component inside UXP. React has issues with adding event listeners on web components.
From React Documentation:
Events emitted by a Web Component may not properly propagate through a React render tree. You will need to manually attach event handlers to handle these events within your React components.
You can use addEventListener instead of onChange. The below code works.
@sttk3 In the above code, I was able to print “change event fired when event listener is added” log and wasn’t able to print “change fired” log which is understandable as per React limitations. You can remove the onChange and make your code work with addEventListener. Input event was working either way with or without addEventListener.