Size Change: -179 B (0%)

Total Size: 1.17 MB

_{compressed-size-action}

Noticed a weird glitch here (I'm testing on safari), When I click on one of the select options (and before releasing the button), the panel chevron icons on the sidebar move to the right.

Does it also affect the font size dropdown selector where the combobox is already used?

No, it only affects the author control, that said the font size one is not a ComboboxControl, it's a CustomSelectControl.

No, it only affects the author control, that said the font size one is not a ComboboxControl, it's a CustomSelectControl.

Oh, I see now. I thought previously that the selector used ComboboxControl, maybe that changed?

For a first accessibility feedback, please see this comment on the related PR for the Page parent combobox: #25267 (comment)

@afercia I took a pass at starting implementing the author selector using the same component the tag autocomplete selector uses: FormTokenField in #25420

It sort of works and illustrates some of the fundamental UX differences here:

• The tag selector never shows a dropdown of selections, Downshift shows a default list of items (maybe this is ok - for <= 50 users we can show a standard select element)
• The tag selector is designed to contain multiple tags, the page/author selectors are designed to choose a single item. I hack that by hiding the existing tag, with mixed results.
• The tag selector is designed to allow you to "clear" all of the tags and have a blank field. This should be possible for pages (no parent) but not authors.
• one other limitation - values in the selector are flat, not objects, so we can't store both the author name and id. instead we combine the two and extract them using a regex when selected.

Given the fact that this component already has excellent accessibility, does it seem worth trying to extend the underlying component to better fit our use case?

@adamsilverstein thanks for further exploring this issue!

Well if you ask me, I see a value in abstracting the Gutenberg combobox (auto-completer) implementation and make it more reusable, not only for internal usage but also for usage by plugins. I think I mentioned this a few times in other issues 🙂 As per the technical side, I'm afraid I don't have the skills to be of help with coding.

The tag selector never shows a dropdown of selections, Downshift shows a default list of items (maybe this is ok - for <= 50 users we can show a standard select element)

Using a native <select> element for a small amount of users seems a very good idea. I'm not sure a search / filtering / suggestions UI would make sense for, say, 5 users even from a visual perspective 🙂

I updated this to use the new ComboboxControl.
I had to update the component a bit cause its behavior didn't match the real use-case expectations but I believe it's good now.

I think we can explore isLoading prop on a separate PR to get it right.

🎉

Thank you @youknowriad for working on this. I'll give this final version a test to see if I notice any issues. I have been working on these selectors for a long time (years?!) so it is really exciting to see this get fixed!

Confirming this works well in my test, excited to see this land!

@adamsilverstein thanks for further exploring this issue!

Well if you ask me, I see a value in abstracting the Gutenberg combobox (auto-completer) implementation and make it more reusable, not only for internal usage but also for usage by plugins. I think I mentioned this a few times in other issues 🙂 As per the technical side, I'm afraid I don't have the skills to be of help with coding.

The tag selector never shows a dropdown of selections, Downshift shows a default list of items (maybe this is ok - for <= 50 users we can show a standard select element)

Using a native <select> element for a small amount of users seems a very good idea. I'm not sure a search / filtering / suggestions UI would make sense for, say, 5 users even from a visual perspective 🙂

@afercia We addressed this in #26426 for the post author selector (and I plan to do the same for the page parent selector soon). Thanks again for all your guidance on this issue.