how to set onBlur for Listbox (formik)

[Tomekmularczyk]

I'm using Formik and Listbox component. I don't know how to properly set onBlur to trigger validation at the correct time.

I tried to set it on Listbox.Options but notice that when you select element from the list, for a split of the second Select turns red - as if was invalid. That happens right at the time when you select the item.

https://codesandbox.io/s/sleepy-wave-qsye7w?file=/src/Select.js

The way it should work:
Given that a Select is required, validation should trigger when user clicks on the Select, but does not select any item.
If user clicks on the Select and selects item from the list no error state should be visible.

Seems to me like this has to be fixed on the library side. Help.

Screen.Recording.2023-03-23.at.13.32.41.mov

[Tomekmularczyk]

anyone?

[Tomekmularczyk]

I might have just found a way by using open prop from Listbox render prop

    <Listbox.Button
          onBlur={(e) => !open && onBlur?.(e)}
    >

[megan-livefront]

@Tomekmularczyk did you end up getting this to work? We are having the same issue you described.

I tried to use the solution you described, but the open value is always true whenever onBlur is called.

    <Listbox disabled={disabled} value={value} onChange={option => onChange(option)}>
      {({ open }) => (
        <>
          <Listbox.Button
            // Unless disabled, override default role to emulate native `select` -- https://github.com/tailwindlabs/headlessui/discussions/2993
            role={disabled ? 'button' : 'combobox'}
            aria-required={required}
            className={styles.button}
            aria-label={ariaLabel}
            onBlur={() => {
              if (!open && onBlur) onBlur()
            }}
          >
            {buttonText}
          </Listbox.Button>
          <Listbox.Options className={styles.options}>{children}</Listbox.Options>
        </>
      )}
    </Listbox>

Was open false for you in your onBlur button function?