Update

components/BMd3TextField.tsx

@@ -1,10 +1,7 @@
 import { Component, ComponentChildren, ContextType } from "preact";
 import { BCtx } from "./BContext.tsx";
-import { Ref, useRef, useState } from "preact/hooks";
-import type {
-    _MdOutlinedTextField as _TextFieldE,
-    MdOutlinedTextField as _TextField,
-} from "../server/md3.ts";
+import { useState } from "preact/hooks";
+import type { _MdOutlinedTextField as _TextField } from "../server/md3.ts";
 import { MdOutlinedTextField } from "../server/dmodule.ts";
 import List from "preact-material-components/List";
 
@@ -41,14 +38,13 @@ type Props<T extends keyof TextType> = {
 export default class BMd3TextField<T extends keyof TextType>
     extends Component<Props<T>, unknown> {
     static contextType = BCtx;
-    ref: Ref<typeof _TextField | null> | undefined;
     declare context: ContextType<typeof BCtx>;
     get clear_cache() {
         return this.props.clear_cache !== undefined
             ? this.props.clear_cache
             : true;
     }
-    get_value(e: _TextFieldE): TextType[T] | undefined {
+    get_value(e: _TextField): TextType[T] | undefined {
         const type = this.props.type;
         if (!e.value.length) return undefined;
         // @ts-ignore Checked
@@ -57,7 +53,6 @@ export default class BMd3TextField<T extends keyof TextType>
         return e.valueAsNumber;
     }
     render() {
-        this.ref = useRef(null);
         if (!MdOutlinedTextField.value) return null;
         let datalist_div = null;
         const [display_datalist, set_display_datalist] = useState(false);
@@ -111,8 +106,6 @@ export default class BMd3TextField<T extends keyof TextType>
             <div class={cn} id={this.props.id}>
                 {desc}
                 <TextField
-                    /**@ts-ignore */
-                    ref={this.ref}
                     value={value}
                     type={this.props.type}
                     label={this.props.label}
@@ -123,7 +116,7 @@ export default class BMd3TextField<T extends keyof TextType>
                     /**@ts-ignore */
                     onInput={(ev: InputEvent) => {
                         if (ev.target) {
-                            const e = ev.target as _TextFieldE;
+                            const e = ev.target as _TextField;
                             this.set_value(this.get_value(e));
                         }
                     }}

components/BSelect.tsx

@@ -28,8 +28,7 @@ type State = {
     selectedIndex: number;
 };
 
-export default class SettingsSelect<T extends obj>
-    extends Component<Props<T>, 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;

components/Md3Select.tsx

@@ -1,5 +1,6 @@
 import { Component, VNode } from "preact";
 import { MdOutlinedSelect, MdSelectOption } from "../server/dmodule.ts";
+import type { _MdOutlinedSelect } from "../server/md3.ts";
 
 type OProps = {
     value: string;
@@ -42,6 +43,7 @@ type Props = {
     hasTrailingIcon?: boolean;
     displayText?: string;
     selectedIndex?: number;
+    set_index?: (index: number) => void;
 };
 
 type State = {
@@ -82,6 +84,13 @@ export default class Md3Select extends Component<Props, State> {
                 hasTrailingIcon={this.props.hasTrailingIcon}
                 displayText={this.props.displayText}
                 selectedIndex={this.state.selectedIndex}
+                onChange={(e) => {
+                    const t = e.target as _MdOutlinedSelect;
+                    this.setState({ selectedIndex: t.selectedIndex });
+                    if (this.props.set_index) {
+                        this.props.set_index(t.selectedIndex);
+                    }
+                }}
             >
                 {/**@ts-ignore */}
                 {this.props.children}

components/SettingsSelect.tsx

@@ -1,7 +1,7 @@
 import { Component, ContextType } from "preact";
 import { SettingsCtx } from "./SettingsContext.tsx";
 import { ConfigType } from "../config.ts";
-import Select from "preact-material-components/Select";
+import Md3Select from "./Md3Select.tsx";
 import { Ref, StateUpdater, useRef } from "preact/hooks";
 
 interface obj {
@@ -16,10 +16,6 @@ type Props<T extends obj> = {
     selectedIndex?: number;
     /**@default {false}*/
     disabled?: boolean;
-    /**@default {false}*/
-    box?: boolean;
-    /**@default {false}*/
-    outlined?: boolean;
     hintText?: string;
     set_value?: StateUpdater<T>;
 };
@@ -32,7 +28,6 @@ export default class SettingsSelect<T extends obj>
     extends Component<Props<T>, State> {
     static contextType = SettingsCtx;
     declare context: ContextType<typeof SettingsCtx>;
-    ref: Ref<Select | undefined> | undefined;
     constructor(props: Props<T>) {
         super(props);
         if (!props.list.length) throw Error("No list.");
@@ -44,27 +39,17 @@ export default class SettingsSelect<T extends obj>
     ): void {
         const selectedIndex = nextProps.selectedIndex || 0;
         this.setState({ selectedIndex });
-        this.update(selectedIndex);
-    }
-    componentDidMount(): void {
-        this.update(this.state.selectedIndex);
     }
     render() {
-        this.ref = useRef<Select>();
         const id = `s-${this.props.name}`;
         return (
             <div class="s-select" id={id}>
                 <label>{this.props.description}</label>
-                <Select
-                    ref={this.ref}
-                    hintText={this.props.hintText}
+                <Md3Select
+                    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;
+                    selectedIndex={this.state.selectedIndex}
+                    set_index={(selectedIndex) => {
                         this.setState({ selectedIndex });
                         this.set_value(selectedIndex);
                     }}
@@ -72,10 +57,10 @@ export default class SettingsSelect<T extends obj>
                     {this.props.list.map((v) => {
                         const t = v.text ? v.text : v.value.toString();
                         return (
-                            <Select.Item disabled={v.disabled}>{t}</Select.Item>
+                            <Md3Select.Option disabled={v.disabled} value={t} />
                         );
                     })}
-                </Select>
+                </Md3Select>
             </div>
         );
     }
@@ -103,17 +88,4 @@ export default class SettingsSelect<T extends obj>
             });
         }
     }
-    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;
-                }
-            }
-        }
-    }
 }