Fix Checkbox indeterminate state

This commit is contained in:
Mats Bosson 2026-03-29 07:23:19 +07:00
parent 3a84dfaac9
commit 041217ca33
2 changed files with 10 additions and 15 deletions

View File

@ -1,5 +1,5 @@
import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { createEffect, splitProps } from "solid-js";
import { createControllableSignal } from "../../primitives/create-controllable-signal";
/** Represents all three states a checkbox can be in. */
@ -37,18 +37,11 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
"children",
]);
const [isChecked, setChecked] = createControllableSignal<CheckedState>(
local.onCheckedChange
? {
const [isChecked, setChecked] = createControllableSignal<CheckedState>({
value: () => local.checked,
defaultValue: () => local.defaultChecked ?? false,
onChange: local.onCheckedChange,
}
: {
value: () => local.checked,
defaultValue: () => local.defaultChecked ?? false,
},
);
});
const ariaChecked = (): boolean | "mixed" => {
const c = isChecked();
@ -87,7 +80,9 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
value={local.value ?? "on"}
checked={isChecked() === true}
ref={(el) => {
if (el) el.indeterminate = isChecked() === "indeterminate";
createEffect(() => {
el.indeterminate = isChecked() === "indeterminate";
});
}}
style={{ display: "none" }}
/>

View File

@ -6,7 +6,7 @@ export interface CreateControllableSignalOptions<T> {
/** Default value used when uncontrolled. Only read once at creation time — not reactive after mount. */
defaultValue: Accessor<T>;
/** Called whenever the value changes (both modes). */
onChange?: (value: T) => void;
onChange?: ((value: T) => void) | undefined;
}
/**