Combobox Tasks about zag

[anubra266]

@anilanar I think it's better to leave the latter part to developers. You might want it to be open when focused and want it to close once selected. And in your usecase, there's no way you want it to be focused and close.

[anilanar]

Suggestion: An alternative combobox mode (or a separate machine) that behaves more like a menu with text filtering. The main difference is that combobox would be open as long as input is focused.

[anubra266]

Suggestion: An alternative combobox mode (or a separate machine) that behaves more like a menu with text filtering. The main difference is that combobox would be open as long as input is focused.

@anilanar Could you shed more context and give a use case. Example libraries will be most helpful

[anubra266]

@anilanar Isn't this what you're looking for?

[anilanar]

That isn't sufficient, because it doesn't open on focus, only opens on click.

[anilanar]

The use case is select/multi-select combobox where

1. user potentially doesn't have enough knowledge to input text without seeing combobox options. for example, github labels.
2. there are too many options, thus requiring text filtering.

Due to Point 2, cannot use a select/multiselect component (one that lacks an input field for filtering) for that use case, must use a combobox.
Due to Point 1, should probably keep combobox open as long as input is focused.

In addition, with multi-selection, it's sometimes more preferable to not close combobox on select.

[anubra266]

@anilanar The way I see it a openOnFocus and closeOnSelect prop should be okay right?

[anilanar]

Yes, but it's harder to then imagine if there exists any state that is focused but not open.
It would be simpler to introduce a mode that makes isOpen = isFocused.

But with 2 props to control like that, then can potentially have more flexibility/freedom.

[anilanar]

Bug report:

Reproduction:

1. In next-ts example project, click on toggle button.
2. Immediately hit TAB.

It crashes with:

TypeError: ctx2.selectionData is null

In selectOption action, the following line fails because it assumes (with the ! operator) that there's a selection when there's none:

          if (ctx.selectionBehavior === "set") {
            value = ctx.selectionData!.label
          }

[anilanar]

Bug or not?

Reproduction:

1. Set selectOnTab: false
2. Click toggle button
3. Hit arrow down couple times to highlight an option.
4. Hit tab

Outcome: State stays in interacting (so it thinks it still has focus), focuses listbox element.
Expected: State switches to idle, focuses the next element in page.

[anubra266]

Bug or not?

Reproduction:

1. Set selectOnTab: false
2. Click toggle button
3. Hit arrow down couple times to highlight an option.
4. Hit tab

Outcome: State stays in interacting (so it thinks it still has focus), focuses listbox element. Expected: State switches to idle, focuses the next element in page.

@anilanar It's a bug, please open an issue.

[anilanar]

Potential problem:

After closeOnSelect: false is implemented, implementing a multi-select combobox doesn't feel natural because the last selection is stored in context.selectionData and onSelect is triggered with a watch on that. So selecting the same option (via ENTER) doesn't trigger an onSelect because context.selectionData doesn't change, so toggling an option forth and back doesn't work.

Reproduction:

1. Set closeOnSelect: false and selectionBehavior: clear.
2. Add an onSelect callback and console.log('onSelect').
3. Click toggle button, hit arrow down key couple times and highlight an option.
4. Hit ENTER key. You'll see something in log.
5. Now hit ENTER as many times as you want.

Output: Nothing is logged.
Expected: Each ENTER logs onSelect.

[anilanar]

Another case of double emitting click events similar to #237:

When closeOnSelect: false is implemented, option click events are emitted twice, breaking the use case of toggleable options. It's due to onPointerUp event handler, which manually triggers an additional click event.

Reproduction:

1. Set closeOnSelect: false.
2. Add an onSelect callback and console.log('onSelect').
3. Click toggle button to open the combobox.
4. Click an option.

Output: onSelect is logged twice.
Expected: onSelect is logged once.

[segunadebayo]

Hi @anilanar, It'll be helpful if you also attach a minimal reproduction for these issues. or at least a screen recording that captures the bug.

[anilanar]

I implemented closeOnSelect: false myself, so there's no reproduction on existing code yet. I edited above posts and added reproductions anyways.

[anubra266]

I implemented closeOnSelect: false myself, so there's no reproduction on existing code yet. I edited above posts and added reproductions anyways.

Hi @anilanar would be nice for you to open a different issue, to track your specific case.

[segunadebayo]

I'll open separate issues and PRs for this task