fix: dropdown bugs

src/components/Form/Settings/Dropdown/Dropdown.jsx

@@ -1,126 +1,81 @@
-import variables from 'config/variables';
-import { PureComponent, createRef } from 'react';
-// import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
-import { Description, Field, Label, Select } from '@headlessui/react';
+import { Field, Label, Select } from '@headlessui/react';
 import { MdKeyboardArrowDown } from 'react-icons/md';
 import clsx from 'clsx';
+import { useEffect, useState, useRef } from 'react';
 
 import EventBus from 'utils/eventbus';
+import variables from 'config/variables';
 
-class Dropdown extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: localStorage.getItem(this.props.name) || this.props.items[0].value,
-      title: '',
-    };
-    this.dropdown = createRef();
-  }
+const Dropdown = (props) => {
+  const [value, setValue] = useState(localStorage.getItem(props.name) || props.items[0]?.value);
+  const dropdown = useRef(null);
 
-  onChange = (e) => {
-    const { value } = e.target;
+  useEffect(() => {
+    setValue(localStorage.getItem(props.name) || props.items[0]?.value);
+  }, [props.name]);
 
-    if (value === variables.getMessage('modals.main.loading')) {
+  const onChange = (e) => {
+    const newValue = e.target.value;
+
+    if (newValue === variables.getMessage('modals.main.loading')) {
       return;
     }
 
-    variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
+    variables.stats.postEvent('setting', `${props.name} from ${value} to ${newValue}`);
 
-    this.setState({
-      value,
-    });
+    setValue(newValue);
 
-    if (!this.props.noSetting) {
-      localStorage.setItem(this.props.name, value);
-      localStorage.setItem(this.props.name2, this.props.value2);
+    if (!props.noSetting) {
+      localStorage.setItem(props.name, newValue);
+      localStorage.setItem(props.name2, props.value2);
     }
 
-    if (this.props.onChange) {
-      this.props.onChange(value);
+    if (props.onChange) {
+      props.onChange(newValue);
     }
 
-    if (this.props.element) {
-      if (!document.querySelector(this.props.element)) {
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
         document.querySelector('.reminder-info').style.display = 'flex';
         return localStorage.setItem('showReminder', true);
       }
     }
 
-    EventBus.emit('refresh', this.props.category);
+    EventBus.emit('refresh', props.category);
   };
 
-  render() {
-    const id = 'dropdown' + this.props.name;
-    const label = this.props.label || '';
+  const id = 'dropdown' + props.name;
+  const label = props.label || '';
 
-    return (
-      {
-        /*<FormControl fullWidth className={id}>
-        <InputLabel id={id}>{label}</InputLabel>
-        <Select
-          labelId={id}
-          id={this.props.name}
-          value={this.state.value}
-          label={label}
-          onChange={this.onChange}
-          ref={this.dropdown}
-          key={id}
-        >
-          {this.props.items.map((item) =>
-            item !== null ? (
-              <MenuItem key={id + item.value} value={item.value}>
-                {item.text}
-              </MenuItem>
-            ) : null,
-          )}
-        </Select>
-        </FormControl>*/
-      },
-      (
-        <div className="w-[100%] max-w-md">
-          <Field
-            id={this.props.name}
-            value={this.state.value}
-            label={label}
-            onChange={this.onChange}
-            ref={this.dropdown}
-            key={id}
+  return (
+    <div className="w-[100%] max-w-md">
+      <Field id={props.name} value={value} label={label} onChange={onChange} ref={dropdown} key={id}>
+        <Label className="text-sm/6 font-medium text-white" id={props.name} value={value} label={label} onChange={onChange} ref={dropdown} key={id}>
+          {label}
+        </Label>
+        <div className="relative">
+          <Select
+            className={clsx(
+              'border border-[#484848] block w-full appearance-none rounded-lg bg-white/5 py-1.5 px-3 text-sm/6 text-white',
+              'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
+              '*:text-black box-border',
+            )}
+            value={value}
+            onChange={onChange}
           >
-            <Label
-              className="text-sm/6 font-medium text-white"
-              id={this.props.name}
-              value={this.state.value}
-              label={label}
-              onChange={this.onChange}
-              ref={this.dropdown}
-              key={id}
-            >
-              {label}
-            </Label>
-            <div className="relative">
-              <Select
-                className={clsx(
-                  'border border-[#484848] block w-full appearance-none rounded-lg bg-white/5 py-1.5 px-3 text-sm/6 text-white',
-                  'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
-                  // Make the text of each option black on Windows
-                  '*:text-black box-border',
-                )}
-              >
-                {this.props.items.map((item) =>
-                  item !== null ? (
-                    <option key={id + item.value} value={item.value}>
-                      {item.text}
-                    </option>
-                  ) : null,
-                )}
-              </Select>
-              <MdKeyboardArrowDown className="group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60" />
-            </div>
-          </Field>
+            {props.items.map((item) =>
+              item !== null ? (
+                <option key={id + item.value} value={item.value}>
+                  {item.text}
+                </option>
+              ) : null,
+            )}
+          </Select>
+          <MdKeyboardArrowDown className="group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60" />
         </div>
-      )
-    );
-  }
-}
+      </Field>
+    </div>
+  );
+};
 
-export { Dropdown as default, Dropdown };
+export { Dropdown as default, Dropdown };