Settings menu items unavailable when none already selected. (PP-102…

…2) (#103)
ThePalaceProject · Feb 29, 2024 · d899ec1 · d899ec1
1 parent 14d20cd
commit d899ec1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/src/components/InputList.tsx b/src/components/InputList.tsx
@@ -16,20 +16,20 @@ export interface InputListProps {
   labelAndDescription?: (setting: SettingData) => JSX.Element[];
   setting: SettingData | CustomListsSetting;
   disabled: boolean;
-  value: Array<string | {} | JSX.Element>;
+  value: Array<string | object | JSX.Element>;
   altValue?: string;
   additionalData?: any;
   onSubmit?: any;
   onEmpty?: string;
   title?: string;
   capitalize?: boolean;
-  onChange?: (value: any) => {};
+  onChange?: (value: any) => object;
   readOnly?: boolean;
   disableButton?: boolean;
 }
 
 export interface InputListState {
-  listItems: Array<string | {}>;
+  listItems: Array<string | object>;
   newItem?: string;
   options?: JSX.Element[];
 }
@@ -225,7 +225,7 @@ export default class InputList extends React.Component<
     }
   }
 
-  renderToolTip(item: {} | string, format: string) {
+  renderToolTip(item: object | string, format: string) {
     const icons = {
       geographic: <LocatorIcon />,
     };
@@ -262,14 +262,13 @@ export default class InputList extends React.Component<
       }
     }
     // Items that have already been selected, and should be eliminated from the menu.
-    const listItems = this.state
-      ? this.state.listItems
-      : this.props.value || this.props.setting.default;
+    const listItems =
+      this.state?.listItems ||
+      this.props.value ||
+      this.props.setting.default ||
+      [];
     // Items that haven't been selected yet.
-    const remainingOptions = listItems
-      ? allOptions.filter((o) => listItems.indexOf(o.props.value) < 0)
-      : [];
-    return remainingOptions;
+    return allOptions.filter((o) => !listItems.includes(o.props.value));
   }
 
   updateNewItem() {
@@ -280,7 +279,7 @@ export default class InputList extends React.Component<
     this.setState({ ...this.state, ...{ newItem: (ref as any).getValue() } });
   }
 
-  async removeListItem(listItem: string | {}) {
+  async removeListItem(listItem: string | object) {
     await this.setState({
       listItems: this.state.listItems.filter(
         (stateListItem) => stateListItem !== listItem

diff --git a/src/components/__tests__/InputList-test.tsx b/src/components/__tests__/InputList-test.tsx
@@ -374,6 +374,24 @@ describe("InputList", () => {
       );
       expect(wrapper.state()["listItems"].includes("Option 1")).to.be.true;
     });
+    it("doesn't lose options when nothing is selected", () => {
+      const setting = {
+        ...wrapper.prop("setting"),
+        ...{ type: "menu", default: null, format: "narrow" },
+      };
+      wrapper = mount(
+        <InputList
+          createEditableInput={createEditableInput}
+          labelAndDescription={labelAndDescription}
+          value={null}
+          setting={setting}
+          disabled={false}
+        />,
+        { context }
+      );
+      const options = wrapper.find("option");
+      expect(options.length).to.equal(3);
+    });
     it("optionally eliminates already-selected options from the menu", () => {
       let options = wrapper.find("option");
       expect(options.length).to.equal(3);