Can't get onBlur to work properly

[CharlotteArai]

Hi!
 So I’m trying to understand how the onBlur & onChange works, maybe you can help me out?

I have a Select that I don’t want to have a pre-selected value in.

My problem is that if a user just opens the select but don’t pick a value (just closing it by clicking outside the select), the onBlur selects the first value as the set option (in backend - not in the UI). Also, it sets the altered flag to true, even though nothing should have changed.

This means that if the user opens the Select again and selects the first value, the onChange won’t fire.

I’ve made a sandbox to illustrate what I mean. https://codesandbox.io/s/no-selected-val-30o8u?file=/src/App.js

If you open/close the Select multiple times, the onBlur object changes (and sometimes the onChange seems to fire as well ? ).

Basically, if the user don’t select anything, I want to keep the ‘Nothing selected’ and don’t set a selectedValue in the onBlur.

I have commented out some code in the sandbox where I tried using state & key for clearing the set value, but it didn’t make any difference.

What am I missing? 😇 Any help is much appreciated!

[benbowes]

Hi @CharlotteArai

For RRS to work as intended, there should be a default value in your options

const options = [
    // { text: "any", value: null},
    { text: "val1", value: "1" },
    { text: "val2", value: "2" }
 ];