[Epic]: Select widget family - stability

[somangshu]

Objective

Improve the select widgets by addressing code, default and consistency behaviours which will stabilise the widget

Select and multi select widgets

• Code [Task]: Refactor Select and MultiSelect Widget to have a base Shared widget #10575
• Default behaviour
  • [Bug]-[300]:Default value is displayed on widget even when it is not available in drop-down options #12225
  • [Bug]-[200]:Select widget's default selectedOptionLabel shows data from the value field and not the label field #12554
  • [Bug]-[1200]:Unable to select previously selected option from dropdown if value outside the options is set - unless other option is selected at-least once #12531
  • [Feature]-[516]:Select value default changes for consistency and server side filtering #13664
  • [Feature]-[213]:Multiselect widget default value consistency for server side filtering #13665
• consistency in UX and UI
  • [Bug]-[1500]:MultiSelect and TreeSelect widget cannot be dragged by its body #7259
  • [Bug]-[500]:Select widget's scrollbar acts differently from the other select widgets #9550
  • [Feature]-[245]:Select / Multi-Select widget - Clear Property #6780
  • [Bug]-[132]:Mouse pointer remains as clickIcon on the select widget dropdown icon when the select widget is disabled #9424
  • [Bug]-[30]:onFilterUpdate in Multi select widget is triggered on changing the page and coming back #12660

The select widget today has too many breaking use case, specially after the v2. Even the codebase has a lot of unused styles which is difficult to maintain, more things can be observed if an in-depth analysis of code is conducted. We also need to think about the DX consistently across select family, Like handling the validations on default value in different widgets.

Success Metrics

Goal	Metric
Consistent UI and UX	We need to look at the interactions the widget has and make it consistent, This needs to happen for the UI too
Simplify DX	User should not have a hard time setting up properties like default value.

Requirements

Requirement	User Story
code refactor	use the minimum code that is required, abstract the styles common to all widgets in the family, performance profile and find out any other changes
default value & validations refactor	The select widget family has been reported to produce inconsistent DX and Bugs while setting up the default value, Wrong or unclear validation was also shown
UI and UX consistency	UI and interactions need to be made consistent across the select widgets, ex the popup opening, or the selected and hover state of options etc.

Documentation

• some changes will be required around the fixes made on DX / default value / validation

Out of Scope

• Other enhancements that are listed by users or otherwise

Developer Handoff Document in Figma

No response

RACI matrix

Responsible	@souma-ghosh
Accountable	@souma-ghosh
Consulted	@ashit-rath @Nikhil-Nandagopal @Tooluloope
Informed	@somangshu @dilippitchika

[Nikhil-Nandagopal]

@somangshu can we add #11844 also to this

[Tooluloope]

@Nikhil-Nandagopal I think this is being fixed here #10600

[Tooluloope]

@momcilo-appsmith @jsartisan, Currently, is there any design fix in the Select family?

[momcilo-appsmith]

There are no updates to functionality that I know of. The only updates are the ones for the inconsistencies between the widgets that we found earlier @Tooluloope.

[dilippitchika]

Priority issues for me, which should be picked up right now (outside of this epic)

1. [Bug]: Focus lossing while click on multi dropdown list #11849 - Raised by community and very annoying experience
2. [Bug]-[350]:Clicking on Tree and Multi-Tree-select dropdown inside tab widget the focus jumps to the top area on the canvas #11485 - Same issue as [Bug]: Focus lossing while click on multi dropdown list #11849 happening in tabs
3. [Bug]: Multi Select options are being picked from the default value instead of the label field #12020 - Default value should first search in the options.

Looks like multi-select widget needs some more effort than select widget.

[somangshu]

@dilippitchika iin case we want to take this up separately lets create a new issue / epic and address it, Is our goal clear?

[Tooluloope]

#12020 is waiting to be merged.
Gone through QA

[dilippitchika]

Suggested Milestone 1

• [Task]: Refactor Select and MultiSelect Widget to have a base Shared widget #10575
• [Bug]-[1200]:Unable to select previously selected option from dropdown if value outside the options is set - unless other option is selected at-least once #12531
• [Feature]-[516]:Select value default changes for consistency and server side filtering #13664
• [Feature]-[213]:Multiselect widget default value consistency for server side filtering #13665
• [Bug]-[300]:Default value is displayed on widget even when it is not available in drop-down options #12225
• [Bug]-[200]:Select widget's default selectedOptionLabel shows data from the value field and not the label field #12554

@somangshu @Tooluloope please review this, i have updated the issues in the list and think that these issues should be shipped first. They need not be shipped together, but the idea is we can divide this epic into milestones and keep tracking.

[somangshu]

Cc @souma-ghosh

[dilippitchika]

@somangshu a valid suggestion from Nikhil was to use epic currently for select and multi select widgets and not the tree select widget because of the lower reach of the widgets, barring one issue #11485

We could re-evaluate if we want to work on tree and multi-tree-select once we are done with the milestone 1 and we should be okay to to pick them up later. This would also shorten the scope a lot. Any concerns with this approach?

[dilippitchika]

NOT IN SCOPE, just documenting for reference

Tree select and multi-tree-select

• [Bug]-[350]:Clicking on Tree and Multi-Tree-select dropdown inside tab widget the focus jumps to the top area on the canvas #11485
• [Task]: Refactor TreeSelect and MultiTreeSelect Widget to have a base Shared widget #13674
  • [Bug]-[80]:Multi Tree Select not correctly populating its selectedOptionValues field. #12235
  • [Enhancement]: Server side filtering in tree and multi-tree select #10847
  • [Bug]-[100]:MultiSelectTree and TreeSelect unable to select an option whose value is with parentheses #12609

[dilippitchika]

Updated the scope of the epic to only contain select and multiselect for now

[dilippitchika]

18 May

Action items

• @dilippitchika to update the issues in the epic so that they are linked - Deadline 18 May
• @souma-ghosh to go over all the issues in the epic and understand the context better with Tolu and Ashit's help - Deadline 24 May
• @souma-ghosh to work on a tech spec and get back to us.
• @souma-ghosh develop a test plan around the select widget stability.