[Admin][UI] New select component #6190

chaimann · 2025-03-13T19:48:44Z

Summary

Adds a new select component in "ui/forms/select", using Tom Select under the hood.
Tom Select integration done with a web component, extending an HTMLSelectElement.
Reused styles from "ui/dropdown" for options dropdown, and from "ui/badge" for multiple options selected.
Other changes:

moved custom validity logic from "ui/forms/input/component.js" to its own controller;
updated "ui/forms/field" to conditionally show error message depending on the input validity state

Demo:
Component overview

Screen.Recording.2025-03-14.at.19.05.06.mov

Address component using new select

Screen.Recording.2025-03-14.at.19.08.52.mov

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

I agree that my PR will be published under the same license as Solidus.
I have written a thorough PR description.
I have kept my commits small and atomic.
I have used clear, explanatory commit messages.

codecov · 2025-03-14T14:41:59Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.78%. Comparing base (7901f79) to head (252788d).
Report is 13 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6190      +/-   ##
==========================================
+ Coverage   88.72%   88.78%   +0.06%     
==========================================
  Files         838      839       +1     
  Lines       18193    18215      +22     
==========================================
+ Hits        16142    16173      +31     
+ Misses       2051     2042       -9

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

tvdeyen

Nice. I like us to include third party libraries like that. But I would like us to get rid of Stimulus as well in the select component. Can you try to extract the validation logic into a reusable es module?

admin/app/javascript/solidus_admin/web_components/tom_select.js

tvdeyen · 2025-03-16T08:24:42Z

admin/config/importmap.rb

+
+pin "tom-select", to: "https://ga.jspm.io/npm:[email protected]/dist/esm/tom-select.complete.js"
+pin "@orchidjs/sifter", to: "https://ga.jspm.io/npm:@orchidjs/[email protected]/dist/esm/sifter.js"
+pin "@orchidjs/unicode-variants", to: "https://ga.jspm.io/npm:@orchidjs/[email protected]/dist/esm/index.js"


urgh. just realized that we use CDNs for third party libraries. That is something we want to address in the future and download them instead. This is a performance nightmare and a potential GDPR violation.

admin/app/components/solidus_admin/ui/forms/select/component.rb

chaimann · 2025-03-17T17:44:58Z

@tvdeyen how about something like this? 6a6f256

tvdeyen

Very nice. Works great. We need to add support for Safari and I have a weird behaviour with single selects.

After selecting a value there still is a carret

And I can type ahead

Not sure if this is a expected behaviour for tomselect and there are valid reasons (a11y) for that, but still it is very uncommon. Maybe this can be disabled?

admin/app/components/solidus_admin/ui/forms/select/component.rb

admin/config/importmap.rb

admin/lib/solidus_admin/testing_support/feature_helpers.rb

chaimann · 2025-03-21T22:37:49Z

thanks @tvdeyen! re: single select caret, it's indeed a default Tomselect behaviour and I agree it does not feel right.

A workaround for that could be using a built-in plugin for search input being placed inside a dropdown for single selects:

We could customize it further, e.g. have search input only when there are more than 10 options in the dropdown (really does not make sense to have it for 2-3 options, only taking away the space).

And for multiple selects I'd still keep the search as it is now, it feels natural.

Let me know what you think!

chaimann · 2025-04-01T12:04:08Z

@tvdeyen I ended up downloading the shim and continue using "is" attribute. The caret and type ahead in single selects is also fixed in a way that the input will become non-visible to the user, but if they try to type the options will still be filtered (kind of how the common select elements work)

tvdeyen

Works great. The only thing is that a long result list in a Dialog now causes scrollbars.

This is due to the fact that the dialog container has a overflow-auto class. Maybe we just remove this?

chaimann · 2025-04-01T14:08:01Z

@tvdeyen oh yeah! i thought i added it but apparently it's in another PR I've been working on. will fix!

chaimann · 2025-04-04T10:51:07Z

hi @tvdeyen, so it appeared that removing overflow-auto allowed the options dropdown to overflow the modal, but it actually disables the scrolling within the dialog if content does not fit max modal height. so instead i had to tweak our web component to account for that, it's not ideal to my taste, but it works correctly now

tvdeyen · 2025-04-04T12:50:11Z

hi @tvdeyen, so it appeared that removing overflow-auto allowed the options dropdown to overflow the modal, but it actually disables the scrolling within the dialog if content does not fit max modal height. so instead i had to tweak our web component to account for that, it's not ideal to my taste, but it works correctly now

I feared that that will be the problem and I don't like that solution either. It will fall apart very fast (selects on the bottom of the screen need to be aligned to the bottom of the container. etc. pp.) This can be very cumbersome to maintain.

If there is no simpler solution (or plugin) I think we should live with that fact. That's due to the fact that we use modals now. I like modals, but they come with their own bag of problems.

We can also decide to not use a modal in that example (adding store credit)

chaimann · 2025-04-06T09:43:49Z

@tvdeyen agreed, but can you please clarify what you mean by:

It will fall apart very fast (selects on the bottom of the screen need to be aligned to the bottom of the container

The simplest I can do is to remove overflow-auto from inner container, so that instead of this

we will have this

i.e. it will still cut off but at least not at the footer edge but at the modal edge. The modal scroll will still be preserved

chaimann · 2025-04-10T09:35:14Z

@tvdeyen could you please have a look when you have time, I have a couple of PRs dependent on this one, would be very helpful to move this forward 🙏

tvdeyen · 2025-04-10T09:55:03Z

@chaimann on it. Still busy with #6203 to get our test suite green and more stable again.

tvdeyen · 2025-04-10T10:07:48Z

@chaimann #6203 has been merged, can you rebase please?

Uses Tom Select (https://tom-select.js.org/).

This allows to reuse it in the new select component. Changes value name to be more reflective of what it stores.

Changed "Store Credit ..." to "Store credit ..." to match the lowercase second-word style used in other places.

Also removes all logic regarding rendering a select field from "ui/forms/input" component as not relevant. Adds a test helper `tomselect` for feature tests.

Uses tailwind's `peer-invalid` state modifier to conditionally show/hide error message.

In compliance with commit 1ff04b2

Due to Safari not supporting customized builtins (is="" attribute) (https://bugs.webkit.org/show_bug.cgi?id=182671) use a polyfill to provide this functionality in Safari.

This change brings a behaviour similar to the one that common HTML selects have, on top of some of TomSelect niceties. By default, TomSelect would include a search input in single select mode, even when there is an option selected, which is uncommon. So instead, we keep search box visible only when there is nothing selected. As soon as user selects an option, select box gains "opacity-0" and therefore hides the confusing search box effects (caret and ability to type ahead). However, since a usual HTML select responds to user's typing by highlighting matched option (if any), we can replicate this logic because technically the input is not gone, and it still responds to user input. If user types while the select is focused, the options will be filtered and highlight will be applied (TomSelect defaults), however if filter search returns 0 options - we reset the search term to empty string and options displayed to show full list again.

chaimann · 2025-04-10T10:40:03Z

@tvdeyen done!

tvdeyen

Works very well now! Thanks

github-actions bot added the changelog:solidus_admin label Mar 13, 2025

chaimann force-pushed the admin-ui-select-component branch 3 times, most recently from f41962e to a4f6329 Compare March 14, 2025 14:24

chaimann marked this pull request as ready for review March 14, 2025 18:12

chaimann requested a review from a team as a code owner March 14, 2025 18:12

tvdeyen reviewed Mar 16, 2025

View reviewed changes

chaimann requested a review from tvdeyen March 20, 2025 17:36

tvdeyen reviewed Mar 21, 2025

View reviewed changes

admin/app/components/solidus_admin/ui/forms/select/component.rb Show resolved Hide resolved

admin/config/importmap.rb Show resolved Hide resolved

admin/lib/solidus_admin/testing_support/feature_helpers.rb Outdated Show resolved Hide resolved

chaimann marked this pull request as draft March 31, 2025 14:13

chaimann force-pushed the admin-ui-select-component branch 2 times, most recently from 848a8b0 to 1c43103 Compare April 1, 2025 11:37

chaimann marked this pull request as ready for review April 1, 2025 12:01

chaimann requested a review from tvdeyen April 1, 2025 12:01

tvdeyen reviewed Apr 1, 2025

View reviewed changes

chaimann requested a review from tvdeyen April 4, 2025 10:51

chaimann force-pushed the admin-ui-select-component branch from d28ab12 to c3f7c7c Compare April 6, 2025 20:12

chaimann added 2 commits April 10, 2025 12:09

Create web component for custom UI select element

6cd6e69

Uses Tom Select (https://tom-select.js.org/).

Move custom validity logic in its own controller

b4a474f

This allows to reuse it in the new select component. Changes value name to be more reflective of what it stores.

chaimann added 10 commits April 10, 2025 12:09

Add new UI component for select field

0ce30a5

Standardize error message casing for store credit

528a9c4

Changed "Store Credit ..." to "Store credit ..." to match the lowercase second-word style used in other places.

Update ui/forms/field component to render new select component

e827b60

Also removes all logic regarding rendering a select field from "ui/forms/input" component as not relevant. Adds a test helper `tomselect` for feature tests.

Add conditional render of an error for fields

a0039f9

Uses tailwind's `peer-invalid` state modifier to conditionally show/hide error message.

Rename web component

2f64450

Move custom validity logic into separate module

05bcce9

Rename feature helper to "solidus_select"

549aa60

In compliance with commit 1ff04b2

Use customElements polyfill to add Safari support

1513722

Due to Safari not supporting customized builtins (is="" attribute) (https://bugs.webkit.org/show_bug.cgi?id=182671) use a polyfill to provide this functionality in Safari.

Allow select dropdown to overflow modal footer

252788d

chaimann force-pushed the admin-ui-select-component branch from c3f7c7c to 252788d Compare April 10, 2025 10:10

tvdeyen approved these changes Apr 10, 2025

View reviewed changes

tvdeyen merged commit 63d01f1 into solidusio:main Apr 10, 2025
23 checks passed

Uh oh!

[Admin][UI] New select component #6190

[Admin][UI] New select component #6190

Uh oh!

Conversation

chaimann commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

codecov bot commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

tvdeyen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tvdeyen Mar 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chaimann commented Mar 17, 2025

Uh oh!

tvdeyen left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

After selecting a value there still is a carret

And I can type ahead

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chaimann commented Mar 21, 2025

Uh oh!

chaimann commented Apr 1, 2025

Uh oh!

tvdeyen left a comment

Choose a reason for hiding this comment

Uh oh!

chaimann commented Apr 1, 2025

Uh oh!

chaimann commented Apr 4, 2025

Uh oh!

tvdeyen commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chaimann commented Apr 6, 2025

Uh oh!

chaimann commented Apr 10, 2025

Uh oh!

tvdeyen commented Apr 10, 2025

Uh oh!

tvdeyen commented Apr 10, 2025

Uh oh!

chaimann commented Apr 10, 2025

Uh oh!

tvdeyen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chaimann commented Mar 13, 2025 •

edited

Loading

codecov bot commented Mar 14, 2025 •

edited

Loading

tvdeyen left a comment •

edited

Loading

tvdeyen commented Apr 4, 2025 •

edited

Loading