HTML attribute `disabled` might need special handling

[Samuli]

Using JSX attribute disabled={true|false} does not work as one might intuitively expect, I tested that at least React handles this as one would expect. The correct behavior can still be achieved by passing disabled={undefined} instead of false which makes sense given how it behaves in HTML, so if you want to require users to do this in the name of library size maybe there should at least be a warning in development builds.

Reproducible on the playground with the following example:

export default function DisabledInput() {
  // The input should _not_ be disabled, but you cannot interact with it
  // Results in: <input type="input" disabled="false">
  return <input type="input" value="test" disabled={false} />
}

[Samuli]

On a further note, even using a disabled={state.disabled ? "" : undefined} workaround doesn't work as it seems that DOM element caching does not remove attributes set to undefined, this is actually an unrelated issue if you want to support dynamically undefining attributes in general, otherwise it could be sidestepped by the generic bool handling:

// Toggling disabled works for the first time, but it gets stuck in the disabled state
export default function ToggleDisable() {
  const state = useState({ disabled: false })
  return <>
    <input type="input" value="test" disabled={state.disabled ? "" : undefined} />
    <button onClick={() => state.disabled = !state.disabled}>
      {state.disabled ? "enable" : "disable"}
    </button>
  </>
}

[Teemu Pääkkönen]

Fixed in 1.21.4