Select in dialog sometimes stops working after first open

[jcmonnin]

When adding a select component to a dialog, the select is unreliable. Most of the time, I can open the select once, but nothing happens on the second time I attempt to open the select.

Here is an example that reproduces the issue. It's some copy & paste form the kobalte samples:

https://stackblitz.com/edit/solidjs-templates-n1zf4zez?file=src%2Fapp.tsx

In a debugging attempt, it looks like in create-controllable-signal.ts there is setValue(false) being called just after setValue(true), therefore something closes the select before it has a chance to be shown. In the call stack, there is onFocusOutside of dismissable-layer-context.tsx.

Note that this is, in contrast to #619, not a recent regression. It has always been like that.

[madaxen86]

Work fine on my Mac.

[shayanhabibi]

I had checked the example repro when the issue was first published and it was indeed behaving as described. But as @madaxen86 has said, it seems to work fine now. Can't repro anymore.

[jcmonnin]

Thanks for the feedback. I observed some randomness in that issue. Currently I just re-tried and can reproduce on Windows Chrome & Firefox and MacOS Safari & Chrome on first attempt. I however believe that it works for some. It works fine on my iPhone. Unfortunately it doesn't work for most of my users (which are mostly on Windows/Chrome).

Unfortunately the layer code isn't that easy to debug, however I might need to get another try to get more details.

[shayanhabibi]

Re-reading the original description, can it temporarily be fixed on affected machines by manually controlling the state of the select modal?

Unless the problem starts reproducing for me, I won't be able to test for myself

In hindsight, I think I ran into a similar issue a few months ago, but thought it was my fault for wiring something wrong and ended up manually controlling the state successfully

[jcmonnin]

Re-reading the original description, can it temporarily be fixed on affected machines by manually controlling the state of the select modal?

Thanks for your feedback. Can you describe what you mean with " temporarily be fixed on affected machines by manually controlling the state of the select modal"? If you mean using a controlled select, I don't think that fixes it. In my real application where the users complain, it's a controlled select. In the linked example on stackblitz, if I change to the controlled select from the examples, it does the same thing for me.

[shayanhabibi]

I was able to reproduce your problem with some testing. The issue is indeed something to do with focus. I don't trust that the issue is generalised, and not isolated to this type of testing environment, or some other implementation detail.

In your environment, I was able to prevent this issue occurring further by applying the following:

export function BasicExample() {
  return (
    <Select
      options={STRING_OPTIONS}
      placeholder="Select a fruit…"
      itemComponent={(props) => (
        <Select.Item item={props.item} class={style.select__item}>
          <Select.ItemLabel>{props.item.rawValue}</Select.ItemLabel>
          <Select.ItemIndicator class={style['select__item-indicator']}>
            <CheckIcon />
          </Select.ItemIndicator>
        </Select.Item>
      )}
    >
      <Select.Trigger class={style.select__trigger} aria-label="Fruit">
        <Select.Value<string> class={style.select__value}>
          {(state) => state.selectedOption()}
        </Select.Value>
        <Select.Icon class={style.select__icon}>
          <CaretSortIcon />
        </Select.Icon>
      </Select.Trigger>
      <Select.Portal>     \* v------------------------v *\
        <Select.Content onFocusOutside={(e) => {e.preventDefault() }} class={style.select__content}>
          <Select.Listbox class={style.select__listbox} />
        </Select.Content>
      </Select.Portal>
    </Select>
  );
}

An example of why this is purely related to focus, is the fact that if the issue starts occuring, you can resolve it by using keyboard actions to navigate and open the select dialog.

Ontop of this, if the select component remains focused via keyboard navigation (and therefore highlighted with a ring), then the issue also stops occurring. See how you go with that and report back.

[jcmonnin]

@shayanhabib: Thanks a lot for this workaround. The onFocusOutside handler seems to be a good temporary fix.

[shayanhabibi]

There's a few things that could be obfuscating this, that need to be investigated imo. I'm not well versed enough in this to figure it out, and there might be an issue of the reproducibility being more specific than intentionally thought (eg: some users find the issue come up easily, while other times it is not apparent at all).

My suggestion in the interim is to perhaps have a page on the docs for known/possible issues?