Use select component from md3

components/BSelect.tsx

@@ -1,6 +1,6 @@
 import { Component, ContextType } from "preact";
-import Select from "preact-material-components/Select";
-import { Ref, StateUpdater, useRef } from "preact/hooks";
+import Md3Select from "./Md3Select.tsx";
+import { StateUpdater } from "preact/hooks";
 import { BCtx } from "./BContext.tsx";
 
 interface obj {
@@ -15,10 +15,6 @@ type Props<T extends obj> = {
     selectedValue?: T;
     /**@default {false}*/
     disabled?: boolean;
-    /**@default {false}*/
-    box?: boolean;
-    /**@default {false}*/
-    outlined?: boolean;
     hintText?: string;
     set_value?: StateUpdater<T>;
     name?: string;
@@ -31,7 +27,6 @@ type State = {
 export default class BSelect<T extends obj> extends Component<Props<T>, State> {
     static contextType = BCtx;
     declare context: ContextType<typeof BCtx>;
-    ref: Ref<Select | undefined> | undefined;
     constructor(props: Props<T>) {
         super(props);
         if (!props.list.length) throw Error("No list.");
@@ -53,34 +48,24 @@ export default class BSelect<T extends obj> extends Component<Props<T>, State> {
         if (index === -1) return;
         const selectedIndex = index || 0;
         this.setState({ selectedIndex });
-        this.update(selectedIndex);
-    }
-    componentDidMount(): void {
-        this.update(this.state.selectedIndex);
     }
     render() {
-        this.ref = useRef<Select>();
         return (
-            <Select
+            <Md3Select
                 id={this.props.id}
-                ref={this.ref}
-                hintText={this.props.hintText}
+                supportingText={this.props.hintText}
                 disabled={this.props.disabled}
-                box={this.props.box}
-                outlined={this.props.outlined}
-                onChange={(e: Event) => {
-                    if (!e.target) return;
-                    /**@ts-ignore */
-                    const selectedIndex: number = e.target.selectedIndex;
+                set_index={(selectedIndex) => {
                     this.setState({ selectedIndex });
                     this.set_value(selectedIndex);
                 }}
+                selectedIndex={this.state.selectedIndex}
             >
                 {this.props.list.map((v) => {
                     const t = v.text ? v.text : v.value.toString();
-                    return <Select.Item disabled={v.disabled}>{t}</Select.Item>;
+                    return <Md3Select.Option disabled={v.disabled} value={t} />;
                 })}
-            </Select>
+            </Md3Select>
         );
     }
     get selectedIndex() {
@@ -97,21 +82,4 @@ export default class BSelect<T extends obj> extends Component<Props<T>, State> {
             });
         }
     }
-    update(index: number) {
-        const e = this.ref?.current;
-        if (e) {
-            const b = e.base;
-            if (b) {
-                const t = b as HTMLElement;
-                const s = t.querySelector("select");
-                if (s) {
-                    s.selectedIndex = index;
-                }
-            }
-        }
-    }
-    update_value(value: T) {
-        const index = this.props.list.findIndex((v) => v.value === value);
-        if (index !== -1) this.update(index);
-    }
 }

components/Md3Select.tsx

@@ -25,6 +25,7 @@ class Md3Option extends Component<OProps> {
 }
 
 type Props = {
+    id?: string;
     children: VNode<Md3Option>[] | VNode<Md3Option>;
     /**@default {false} */
     quick?: boolean;
@@ -71,6 +72,7 @@ export default class Md3Select extends Component<Props, State> {
         const Select = MdOutlinedSelect.value;
         return (
             <Select
+                id={this.props.id}
                 quick={this.props.quick}
                 required={this.props.required}
                 disabled={this.props.disabled}

components/NewTask.tsx

@@ -378,7 +378,6 @@ export default class NewTask extends Component<NewTaskProps, State> {
                         <div class="type">
                             {t("task.type")}
                             <BSelect
-                                outlined={true}
                                 list={[{
                                     value: TaskType.Download,
                                     text: t("task.download"),