React onBlur event doesn't fire

Photoshop
1

In this example the onBlur event in React doesn’t fire at all, (as it should in regular React):

import React from "react";

const App = () => {
  const handleBlur = () => {
    console.log("blur");
  };

  return <input onBlur={handleBlur} />;
};

export default App;
2

Do you know of any workaround for this problem? I would like to have this event because of the input validation when the element loses focus.

3

Some events aren’t available unfortunately, scroll is one of them, too. I don’t think there’s any workaround. I assume focus or focusin isn’t working either? Otherwise this could be a starting point for a workaround…

4

Well, the scroll is working as I just tested it out. To be more precise I used the WheelEvent:

const App = () => {
const handleWheel = (e: React.WheelEvent<HTMLInputElement>) => {
    if (e.deltaY < 0) {
      console.log("UP");
    } else {
      console.log("DOWN");
    }
  };

return <input onWheel={handleWheel} />
}

export default App;

I still have to see that onFocus, but onBlur was more needed since I work in React and wanted to have that validation if the user leaves the input empty. My goal was to use the input element for the numbers and when it’s left empty and loses focus it automatically gets filled with the min value that’s defined for that component.

5

This already worked perfectly in React and using the Adobe React Spectrum package but now I have to rewrite some of the code in order to get it working in UXP. At least from the UI part :slight_smile:

The problem here is that I wanted to have negative integer numbers for the input, so starting with minus (-). That’s why I used type=“text” and made it possible for the input to be empty in order to type that (-) as a first character.

Guess that we would have to wait until Adobe makes it available for us and use some other functionality instead.

6

Oh nice, then I might finally be able to implement custom steps on scroll for number inputs, since that’s still not possible out of the box. It always increased by 0.1 by default.

If Focusin works, you could listen to that on the whole document and then check if the active element is your input. If it’s not, but has been before, it effectively got blurred.

7

Yes, I also used that wheel event for the custom steps on the number inputs :slight_smile:

I will check it out. Thanks.

8

@simonhenke onFocus doesn’t work either. Alright, we will have to wait.

9

I just used onBlur on an input and it’s working now :smiley:

1 Like