chore: update select component (#38954)

![CleanShot 2025-02-03 at 13 51
45](https://github.com/user-attachments/assets/4c7a7a67-c1fc-4fe7-afbb-2342aea27fcc)

Few known bugs:
1. --The placeholder value is cleared when the user is searching. This
is happening cause we are using hack to put search into dropdown and it
is conflicting with native behavior of rc-select--


[](https://github.com/user-attachments/assets/4d40607f-c9c9-4060-9086-cc9d8dc49553)

/ok-to-test tags="@tag.All"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a grouped dropdown with checkboxes for multi-select, making
option organization more intuitive.
- **Enhancements**
	- Upgraded dropdown search with auto-focus and dynamic filtering.
- Improved tag display with responsive limits and an updated "info"
style.
	- Added configuration options to control the number of visible tags.
- **Documentation**
- Expanded examples to showcase the new grouped and checkbox-enhanced
dropdown features.
- **Style**
- Refined styling and animations for dropdown states, ensuring a fluid
and consistent user experience.
- **Bug Fixes**
- Adjusted selectors in tests to improve interaction with dropdowns,
enhancing test reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13173050535>
> Commit: 3363409
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13173050535&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 06 Feb 2025 07:34:34 UTC
<!-- end of auto-generated comment: Cypress test results  -->

app/client/cypress/e2e/Regression/ClientSide/Binding/ChartText_spec.js

@@ -28,8 +28,7 @@ describe(
       EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget, {}, [
         "Container1",
       ]);
-      cy.get(viewWidgetsPage.chartType).last().click({ force: true });
-      cy.get(".t--dropdown-option").children().contains("Column chart").click();
+      cy.selectDropdownValue(viewWidgetsPage.chartType, "Column chart");
       cy.get(
         ".t--property-control-charttype span.rc-select-selection-item span",
       )

app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/ButtonGroup_spec.js

@@ -82,19 +82,13 @@ describe(
 
     it("Update Placement and Verify buttons alignments", function () {
       // check first button placement
-      cy.selectDropdownValue(
-        ".t--property-control-placement .rc-select-selection-item",
-        "Between",
-      );
+      cy.selectDropdownValue(".t--property-control-placement", "Between");
       // 1st btn
       cy.get(firstButton)
         .last()
         .should("have.css", "justify-content", "space-between");
       // update dropdown value
-      cy.selectDropdownValue(
-        ".t--property-control-placement .rc-select-selection-item",
-        "Start",
-      );
+      cy.selectDropdownValue(".t--property-control-placement", "Start");
       cy.get(firstButton).last().should("have.css", "justify-content", "start");
       // other button style stay same
       cy.get(menuButton).should("have.css", "justify-content", "center");

app/client/cypress/e2e/Regression/ClientSide/Widgets/CurrencyInput/CurrencyInput_spec.js

@@ -27,12 +27,13 @@ describe(
 
     it("2. should check for type of value and widget", () => {
       cy.openPropertyPane(widgetName);
-      cy.get(".t--property-control-currency").click();
-      cy.get(".t--property-control-currency").type("usd");
+      cy.openSelectDropdown(".t--property-control-currency");
+      cy.searchSelectDropdown("usd");
       cy.selectDropdownValue(
-        ".t--property-control-currency input",
+        ".t--property-control-currency",
         "USD - US Dollar",
       );
+
       function enterAndTest(text, expected) {
         cy.get(widgetInput).clear();
         cy.wait(300);
@@ -53,7 +54,7 @@ describe(
       });
 
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "1");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "1");
 
       [
         //[input, {{CurrencyInput1.text}}:{{CurrencyInput1.value}}:{{CurrencyInput1.isValid}}:{{typeof CurrencyInput1.text}}:{{typeof CurrencyInput1.value}}:{{CurrencyInput1.countryCode}}:{{CurrencyInput1.currencyCode}}]
@@ -66,7 +67,7 @@ describe(
       });
 
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "2");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "2");
 
       [
         //[input, {{CurrencyInput1.text}}:{{CurrencyInput1.value}}:{{CurrencyInput1.isValid}}:{{typeof CurrencyInput1.text}}:{{typeof CurrencyInput1.value}}:{{CurrencyInput1.countryCode}}:{{CurrencyInput1.currencyCode}}]
@@ -80,10 +81,10 @@ describe(
       cy.get(".currency-change-dropdown-trigger").should("contain", "$");
 
       cy.openPropertyPane(widgetName);
-      cy.get(".t--property-control-currency").click();
-      cy.get(".t--property-control-currency").type("ind");
+      cy.openSelectDropdown(".t--property-control-currency");
+      cy.searchSelectDropdown("ind");
       cy.selectDropdownValue(
-        ".t--property-control-currency input",
+        ".t--property-control-currency",
         "INR - Indian Rupee",
       );
       enterAndTest("100.22", "100.22:100.22:true:string:number:IN:INR");
@@ -100,12 +101,13 @@ describe(
         .last()
         .click();
       enterAndTest("100.22", "100.22:100.22:true:string:number:GB:GBP");
+      enterAndTest("100.22", "100.22:100.22:true:string:number:GB:GBP");
       cy.get(".t--input-currency-change").should("contain", "£");
     });
 
     it("3. should accept 0 decimal option", () => {
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "0");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "0");
       cy.closePropertyPane();
       cy.wait(500);
       cy.openPropertyPane(widgetName);
@@ -142,7 +144,7 @@ describe(
         `{{CurrencyInput1.text}}:{{CurrencyInput1.value}}`,
       );
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "0");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "0");
 
       [
         //[input, {{CurrencyInput1.text}}:{{CurrencyInput1.value}}]
@@ -157,7 +159,7 @@ describe(
       });
 
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "1");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "1");
       [
         //[input, {{CurrencyInput1.text}}:{{CurrencyInput1.value}}]
         ["100", "100:100"],
@@ -171,7 +173,7 @@ describe(
       });
 
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "2");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "2");
       [
         //[input, {{CurrencyInput1.text}}:{{CurrencyInput1.value}}]
         ["100", "100:100"],
@@ -205,7 +207,7 @@ describe(
       }
 
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "0");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "0");
 
       [
         //[input, expected]
@@ -221,7 +223,7 @@ describe(
       });
 
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "1");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "1");
       [
         //[input, expected]
         ["100", "100"],
@@ -238,7 +240,7 @@ describe(
       });
 
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-decimalsallowed input", "2");
+      cy.selectDropdownValue(".t--property-control-decimalsallowed", "2");
       [
         //[input, expected]
         ["100", "100"],

app/client/cypress/e2e/Regression/ClientSide/Widgets/Filepicker/FilePickerV2_CSV_spec.js

@@ -29,7 +29,7 @@ describe(
       );
 
       agHelper.AssertText(
-        commonlocators.filePickerDataFormat,
+        `${commonlocators.filePickerDataFormat} .rc-select-selection-item .ads-v2-text`,
         "text",
         "Array of Objects (CSV, XLS(X), JSON, TSV)",
       );

app/client/cypress/e2e/Regression/ClientSide/Widgets/Input/Inputv2_inside_List_spec.js

@@ -52,13 +52,13 @@ describe(
 
     it("3. Validate DataType - NUMBER can be entered into Input widget", () => {
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-datatype input", "Number");
+      cy.selectDropdownValue(".t--property-control-datatype", "Number");
 
       cy.get(".t--property-control-required label")
         .last()
         .click({ force: true });
 
-      cy.selectDropdownValue(".t--property-control-datatype input", "Number");
+      cy.selectDropdownValue(".t--property-control-datatype", "Number");
       [
         {
           input: "invalid",
@@ -101,7 +101,7 @@ describe(
 
     it("4. Validate DataType - PASSWORD can be entered into Input widget", () => {
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-datatype input", "Password");
+      cy.selectDropdownValue(".t--property-control-datatype", "Password");
       [
         {
           input: "test",
@@ -136,7 +136,7 @@ describe(
 
     it("5. Validate DataType - EMAIL can be entered into Input widget", () => {
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-datatype input", "Email");
+      cy.selectDropdownValue(".t--property-control-datatype", "Email");
 
       cy.get(".t--property-control-required label")
         .last()

app/client/cypress/e2e/Regression/ClientSide/Widgets/Input/Inputv2_spec.js

@@ -27,7 +27,7 @@ describe(
       cy.wait(300);
       cy.get(widgetInput).should("contain.value", "");
 
-      cy.selectDropdownValue(".t--property-control-datatype input", "Number");
+      cy.selectDropdownValue(".t--property-control-datatype", "Number");
 
       cy.get(widgetInput).clear();
       cy.get(widgetInput).type("1.0010{enter}"); //Clicking enter submits the form here
@@ -37,7 +37,7 @@ describe(
 
     it("3. Validate DataType - TEXT can be entered into Input widget", () => {
       cy.selectDropdownValue(
-        ".t--property-control-datatype input",
+        ".t--property-control-datatype",
         "Single-line text",
       );
       [
@@ -112,7 +112,7 @@ describe(
 
     it("4. Validate DataType - NUMBER can be entered into Input widget", () => {
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-datatype input", "Number");
+      cy.selectDropdownValue(".t--property-control-datatype", "Number");
       [
         {
           input: "invalid",
@@ -157,7 +157,7 @@ describe(
         .last()
         .click({ force: true });
 
-      cy.selectDropdownValue(".t--property-control-datatype input", "Number");
+      cy.selectDropdownValue(".t--property-control-datatype", "Number");
       [
         {
           input: "invalid",
@@ -200,7 +200,7 @@ describe(
 
     it("5. Validate DataType - PASSWORD can be entered into Input widget", () => {
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-datatype input", "Password");
+      cy.selectDropdownValue(".t--property-control-datatype", "Password");
       [
         {
           input: "test",
@@ -273,7 +273,7 @@ describe(
 
     it("6. Validate DataType - EMAIL can be entered into Input widget", () => {
       cy.openPropertyPane(widgetName);
-      cy.selectDropdownValue(".t--property-control-datatype input", "Email");
+      cy.selectDropdownValue(".t--property-control-datatype", "Email");
       [
         {
           input: "test",
@@ -361,7 +361,7 @@ describe(
     it("8. onSubmit should be triggered with the whole input value", () => {
       cy.openPropertyPane(widgetName);
       cy.selectDropdownValue(
-        ".t--property-control-datatype input",
+        ".t--property-control-datatype",
         "Single-line text",
       );
       cy.get(".t--property-control-required label")
@@ -415,7 +415,7 @@ describe(
         "anotherText:anotherText:true",
       );
 
-      cy.selectDropdownValue(".t--property-control-datatype input", "Number");
+      cy.selectDropdownValue(".t--property-control-datatype", "Number");
 
       cy.updateCodeInput(".t--property-control-defaultvalue", `{{1}}`);
       // wait for evaluations
@@ -439,7 +439,7 @@ describe(
       // Init isDirty
       cy.openPropertyPane(widgetName);
       cy.selectDropdownValue(
-        ".t--property-control-datatype input",
+        ".t--property-control-datatype",
         "Single-line text",
       );
       cy.updateCodeInput(".t--property-control-defaultvalue", "a");
@@ -490,7 +490,7 @@ describe(
       cy.get(widgetInput).should("have.attr", "autocomplete", "off");
 
       //select a non email or password option
-      cy.selectDropdownValue(".t--property-control-datatype input", "text");
+      cy.selectDropdownValue(".t--property-control-datatype", "text");
       //autofill toggle should not be present as this restores autofill to be enabled
       cy.get(".t--property-control-allowautofill input").should("not.exist");
       //autocomplete attribute should not be present in the text widget

app/client/cypress/e2e/Regression/ClientSide/Widgets/PhoneInput/Phone_input_spec.js

@@ -2,17 +2,7 @@ import * as _ from "../../../../../support/Objects/ObjectsCore";
 
 const widgetName = "phoneinputwidget";
 const widgetInput = `.t--widget-${widgetName} input`;
-const searchAndSelectOption = (optionValue) => {
-  cy.get(".t--property-control-defaultcountrycode input")
-    .last()
-    .scrollIntoView()
-    .click({ force: true })
-    .type(optionValue.substring(0, 3));
-  cy.get(".t--dropdown-option")
-    .children()
-    .contains(optionValue)
-    .click({ force: true });
-};
+
 describe(
   "Phone input widget - ",
   { tags: ["@tag.Widget", "@tag.PhoneInput", "@tag.Binding"] },
@@ -21,7 +11,7 @@ describe(
       _.agHelper.AddDsl("emptyDSL");
     });
 
-    it("1. Add new dropdown widget", () => {
+    it("1. Add new phone input widget", () => {
       cy.dragAndDropToCanvas(widgetName, { x: 300, y: 300 });
       cy.get(`.t--widget-${widgetName}`).should("exist");
       cy.dragAndDropToCanvas("textwidget", { x: 300, y: 500 });
@@ -39,7 +29,12 @@ describe(
       cy.get(".t--widget-textwidget").should("contain", "(999) 999-9999:US:+1");
 
       cy.openPropertyPane(widgetName);
-      searchAndSelectOption("Afghanistan (+93)");
+      cy.openSelectDropdown(".t--property-control-defaultcountrycode");
+      cy.searchSelectDropdown("Afg");
+      cy.selectDropdownValue(
+        ".t--property-control-defaultcountrycode",
+        "Afghanistan (+93)",
+      );
       cy.get(`.t--widget-${widgetName} input`).clear();
       cy.wait(500);
       cy.get(`.t--widget-${widgetName} input`).type("1234567890");
@@ -62,14 +57,24 @@ describe(
       cy.get(".t--property-control-enableformatting label")
         .last()
         .click({ force: true });
-      searchAndSelectOption("United States / Canada (+1)");
+      cy.openSelectDropdown(".t--property-control-defaultcountrycode");
+      cy.searchSelectDropdown("United States / Canada");
+      cy.selectDropdownValue(
+        ".t--property-control-defaultcountrycode",
+        "United States / Canada (+1)",
+      );
       cy.get(`.t--widget-${widgetName} input`).clear();
       cy.wait(500);
       cy.get(`.t--widget-${widgetName} input`).type("9999999999");
       cy.get(".t--widget-textwidget").should("contain", "9999999999:US:+1");
 
       cy.openPropertyPane(widgetName);
-      searchAndSelectOption("India (+91)");
+      cy.openSelectDropdown(".t--property-control-defaultcountrycode");
+      cy.searchSelectDropdown("India");
+      cy.selectDropdownValue(
+        ".t--property-control-defaultcountrycode",
+        "India (+91)",
+      );
       cy.get(`.t--widget-${widgetName} input`).clear();
       cy.wait(500);
       cy.get(`.t--widget-${widgetName} input`).type("1234567890");
@@ -131,13 +136,11 @@ describe(
 
       // Select the Currency dropdown option from property pane
       // and enter a value that has space and returns 0 results
-      cy.get(".t--property-control-defaultcountrycode input")
-        .first()
-        .click()
-        .type("AFDB (+93)");
+      cy.openSelectDropdown(".t--property-control-defaultcountrycode");
+      cy.searchSelectDropdown("AFDB");
 
       // assert that the dropdown is still option
-      cy.get(".t--property-control-defaultcountrycode input").should(
+      cy.get(".ads-v2-select__dropdown .rc-select-item-empty").should(
         "be.visible",
       );
     });

app/client/cypress/locators/ViewWidgets.json

@@ -1,7 +1,7 @@
 {
   "imageWidget": ".t--draggable-imagewidget",
   "chartWidget": ".t--draggable-chartwidget",
-  "chartType": ".t--property-control-charttype input",
+  "chartType": ".t--property-control-charttype",
   "chartTypeText": ".t--property-control-charttype",
   "mapType": ".t--property-control-maptype .rc-select-selection-item",
   "destin": ".appsmith_widget_01ewdomru7",
@@ -36,4 +36,4 @@
   "pickMyLocation": ".t--draggable-mapwidget div[title='Pick My Location']",
   "mapChartEntityLabels": ".t--draggable-mapchartwidget text",
   "listWidget": ".t--draggable-listwidget"
-}
+}