Pressing enter selects all filtered/remaining contents in selector (#2710)

* now on pressing enter will automatically select remaining/filtered contents

* added test for new feat added of geting all filtered items selected on pressing entered

Author: Davda-James

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

@@ -176,7 +176,41 @@ describe("Selector Component", () => {
             await userEvent.clear(search);
             expect(queryAllByText(/Item /)).toHaveLength(4);
         });
-    });
+        it("selects all filtered items on Enter in multi-select mode", async () => {
+            const user = userEvent.setup();
+            const dispatch = jest.fn();
+            const state = INITIAL_STATE;
+            const { getByPlaceholderText, queryAllByText } = render(
+                <TaipyContext.Provider value={{ state, dispatch }}>
+                    <Selector lov={lov} filter={true} multiple={true} updateVarName="varname" />
+                </TaipyContext.Provider>
+            );
+            const search = getByPlaceholderText("Search field");
+            // Filter to items containing 'Item 2' or 'Item 3'
+            await user.type(search, "2");
+            expect(queryAllByText(/Item /)).toHaveLength(1);
+            // Press Enter
+            await user.keyboard("{Enter}");
+            // Should dispatch with filtered id
+            expect(dispatch).toHaveBeenLastCalledWith({
+                name: "varname",
+                payload: { value: ["id2"] },
+                propagate: true,
+                type: "SEND_UPDATE_ACTION",
+            });
+            // Now clear and filter for 'Item'
+            await user.clear(search);
+            await user.type(search, "Item");
+            expect(queryAllByText(/Item /)).toHaveLength(4);
+            await user.keyboard("{Enter}");
+            expect(dispatch).toHaveBeenLastCalledWith({
+                name: "varname",
+                payload: { value: ["id1", "id2", "id3", "id4"] },
+                propagate: true,
+                type: "SEND_UPDATE_ACTION",
+            });
+        });
+    }); 
     describe("Selector Component with dropdown", () => {
         //dropdown
         it("displays as an empty control with arrow", async () => {

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

@@ -549,6 +549,31 @@ const Selector = (props: SelectorProps) => {
 
     const handleInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value), []);
 
+    // Handle Enter key in filter input: select all filtered options in multi-select mode
+    const handleFilterInputKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter" && multiple && filter) {
+                // Find filtered items
+                const filtered = lovList.filter((elt) => showItem(elt, searchValue));
+                const filteredIds = filtered.map((elt) => elt.id);
+                setSelectedValue(filteredIds);
+                dispatch(
+                    createSendUpdateAction(
+                        updateVarName,
+                        filteredIds,
+                        module,
+                        props.onChange,
+                        propagate,
+                        valueById ? undefined : lovVarName
+                    )
+                );
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        },
+        [multiple, filter, lovList, searchValue, setSelectedValue, dispatch, updateVarName, module, props.onChange, propagate, valueById, lovVarName]
+    );
+
     const dropdownValue = ((dropdown || isRadio) &&
         (multiple ? selectedValue : selectedValue.length ? selectedValue[0] : "")) as string[];
 
@@ -732,6 +757,7 @@ const Selector = (props: SelectorProps) => {
                                         placeholder="Search field"
                                         value={searchValue}
                                         onChange={handleInput}
+                                        onKeyDown={handleFilterInputKeyDown}
                                         disabled={!active}
                                         startAdornment={
                                             multiple && showSelectAll ? (