How to extract machine into component #1970

azoriusss · 2024-10-23T12:51:22Z

azoriusss
Oct 23, 2024

Hi everyone !
I'm using zag.js for a project and it works pretty fine overall, but i noticed a weird behaviour when using sub-component in my machine

If I write this ( Disclaimer : this is a useless case juste for example)

export default function Checkbox() {
  const [state, send] = useMachine(
    checkbox.machine({
      id: useId(),
    })
  );

  const api = checkbox.connect(state, send, normalizeProps);

  const CheckboxContent = () => (
    <>
      <div {...api.getControlProps()} className="control" />

      <span {...api.getLabelProps()}>
        Input is {api.checked ? "checked" : "unchecked"}
      </span>
      <input {...api.getHiddenInputProps()} />
    </>
  );

  return (
    <label {...api.getRootProps()} className="root">
      <CheckboxContent />
    </label>
  );
}

Then the checkbox does not work.
However, if I use CheckboxContent() instead of <CheckboxContent/>, it works fine
No problem either if I use the content of CheckboxContent directly

Is this expected behaviour ? Is there some work around ?

Thanks !