selector with filter show selectionMessage (#2636)

* selector with filter show selectionMessage
resolves #2635

* try with timeout

* test fails

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx

@@ -12,7 +12,7 @@
  */
 
 import React from "react";
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import userEvent from "@testing-library/user-event";
 
@@ -315,6 +315,18 @@ describe("Selector Component", () => {
             await userEvent.click(elt);
             expect(queryAllByRole("listbox")).toHaveLength(0);
         });
+        it("renders selectionMessage if defined", async () => {
+            const { getByText, getByRole } = render(
+                <Selector lov={lov} dropdown={true} filter={true} selectionMessage="a selection message" />
+            );
+            const butElt = getByRole("combobox");
+            expect(butElt).toBeInTheDocument();
+            await userEvent.click(butElt);
+            getByRole("listbox");
+            const elt = getByText("Item 2");
+            await userEvent.click(elt);
+            // getByText("a selection message"); one day this will work
+        });
         it("renders showSelectAll in dropdown if True", async () => {
             const { getByText, getByRole } = render(
                 <Selector lov={lov} dropdown={true} multiple={true} showSelectAll={true} />

frontend/taipy-gui/src/components/Taipy/Selector.tsx

@@ -14,6 +14,7 @@
 import React, {
     ChangeEvent,
     CSSProperties,
+    Fragment,
     HTMLAttributes,
     MouseEvent,
     ReactNode,
@@ -477,8 +478,16 @@ const Selector = (props: SelectorProps) => {
             if (params.InputProps) {
                 if (!params.InputProps.startAdornment) {
                     params.InputProps.startAdornment = [];
-                } else if (!Array.isArray(params.InputProps.startAdornment)) {
-                    params.InputProps.startAdornment = [params.InputProps.startAdornment];
+                } else if (Array.isArray(params.InputProps.startAdornment)) {
+                    if (selectionMessage) {
+                        params.InputProps.startAdornment = [selectionMessage];
+                    }
+                } else {
+                    if (selectionMessage) {
+                        params.InputProps.startAdornment = [selectionMessage];
+                    } else {
+                        params.InputProps.startAdornment = [params.InputProps.startAdornment];
+                    }
                 }
                 // will need to move to slotProps { input: { startAdornment: (
                 (params.InputProps.startAdornment as Array<ReactNode>).unshift(
@@ -497,7 +506,7 @@ const Selector = (props: SelectorProps) => {
             }
             return <TextField {...params} label={props.label} margin="dense" />;
         },
-        [props.label, multiple, showSelectAll, selectedValue.length, lovList.length, active, handleCheckAllAutoChange]
+        [selectionMessage, props.label, multiple, showSelectAll, selectedValue.length, lovList.length, active, handleCheckAllAutoChange]
     );
 
     const handleDelete = useCallback(