Baseweb: Click on opened Select closes and reopens select

[jirikolarik]

When you click on already opened select, it closes and reopens.

Current Behavior

This breaks the default behaviour, when double-click is supposed to select a word and tripple-click select the whole input. Also cmd+a doesn't select the content of the input.

That makes the component totally unusable as it breaks the expected behaviour.

It can be seen directly on the website: https://baseweb.design/components/select#select

Expected Behavior

Clicking in the input field when already open shouldn't have any effect.

Double click, tripple-click and cmd+a should behave as the usual way

Your Environment

| Tech | Version |
| ------- | ------- |
| Base UI | v9.97.0 |
| React | 16.9 |
| browser | Safari, Edge |

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[chasestarr]

Thanks for reporting the issue @jirikolarik. We've built the Select component to align closer towards the html select element. You may want to look into the base web Combobox to get good text editing support

[jirikolarik]

I understand, would it worth to consider similar behavior to react-select https://react-select.com/home in this use case?

My initial problen how I come to this conclusion is that after selecting a value (or reopening) the cursor is at the end, which gives user impression of deleting the text before typing. Even tho the text is actually deleted as you start typing. This I find very confusing

What do you think?

[chasestarr]

Are you suggesting that clicks on the input field should not cause the listbox to close? The react-select link you shared seems to have similar behavior to the base web select. I noticed that react-select will place the cursor at the beginning of the text input, is that what you would prefer?

[jirikolarik]

I'm suggesting to place the cursor in the beginning, to give user the feeling he can just start typing. When the cursor is at the end it feels like you need to remove whatever is ahead first.

But you have broader user base, nobody else had an issue with this behaviour?

[chasestarr]

This issue has not been raised in the past, but placing the cursor at the beginning seems like a fine way to better indicate behavior

[hhvys]

@chasestarr @jirikolarik I faced a similar issue with select. Please checkout this example.

When the outer element is focusable(tab-index applied) select closes & reopens by itself. But if there isn't any parent focusable parent of the select, select just closes on clicking again.

Not sure if it's an issue in Popover.

[chasestarr]

Thanks for reporting @hhvys Can you double check the example link? It doesn't seem to work for me

[hhvys]

@chasestarr Please check now. I've updated the link.

[hhvys]

Is anyone working on this? If not can you let me know where should I look in the code? @chasestarr