dropdown selector not active (#898)

resolves #894

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

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

@@ -187,7 +187,22 @@ describe("Selector Component", () => {
             const { getByTestId } = render(<Selector lov={lov} defaultValue="id1" dropdown={true} multiple={true} />);
             getByTestId("CancelIcon");
         });
-        it("opens a dropdown on click", async () => {
+        it("is disabled", async () => {
+            const { getByText } = render(<Selector lov={lov} defaultValue="id1" active={false} dropdown={true} />);
+            const elt = getByText("Item 1");
+            expect(elt.parentElement).toHaveClass("Mui-disabled");
+        });
+        it("is enabled by default", async () => {
+            const { getByText } = render(<Selector lov={lov} defaultValue="id1" dropdown={true} />);
+            const elt = getByText("Item 1");
+            expect(elt.parentElement).not.toHaveClass("Mui-disabled");
+        });
+        it("is enabled by active", async () => {
+            const { getByText } = render(<Selector defaultValue="id1" lov={lov} active={true} dropdown={true} />);
+            const elt = getByText("Item 1");
+            expect(elt.parentElement).not.toHaveClass("Mui-disabled");
+        });
+            it("opens a dropdown on click", async () => {
             const { getByText, getByRole, queryAllByRole } = render(<Selector lov={lov} dropdown={true} />);
             const butElt = getByRole("combobox");
             expect(butElt).toBeInTheDocument()

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

@@ -323,6 +323,7 @@ const Selector = (props: SelTreeProps) => {
                         value={dropdownValue}
                         onChange={handleChange}
                         input={<OutlinedInput label={props.label} />}
+                        disabled={!active}
                         renderValue={(selected) => (
                             <Box sx={renderBoxSx}>
                                 {lovList
@@ -345,6 +346,7 @@ const Selector = (props: SelTreeProps) => {
                                                     onDelete={handleDelete}
                                                     data-id={item.id}
                                                     onMouseDown={doNotPropagateEvent}
+                                                    disabled={!active}
                                                 />
                                             );
                                         } else if (idx === 0) {
@@ -362,7 +364,7 @@ const Selector = (props: SelTreeProps) => {
                         MenuProps={getMenuProps(height)}
                     >
                         {lovList.map((item) => (
-                            <MenuItem key={item.id} value={item.id} style={getStyles(item.id, selectedValue, theme)}>
+                            <MenuItem key={item.id} value={item.id} style={getStyles(item.id, selectedValue, theme)} disabled={item.id === null}>
                                 {typeof item.item === "string" ? item.item : <LovImage item={item.item as Icon} />}
                             </MenuItem>
                         ))}