easyblockshq / easyblocks

The open-source visual builder framework.
https://easyblocks.io
GNU Affero General Public License v3.0
346 stars 55 forks source link

Refs are not passed down to child easyblocks components #82

Open chudesno opened 3 weeks ago

chudesno commented 3 weeks ago

Consider having 2 easyblock components: MyForm and MyInput. Suppose form component has to focus a child input when the button inside of the form is clicked.

This is commonly achieved through usage of useRef/forwardRef.

const MyForm = ({ MyInput, ...props }: NoCodeComponentProps) => {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <form>
      <MyInput.type {...MyInput.props} ref={inputRef}>
        {props.label}
      </MyInput.type>
      <Button onClick={() => inputRef.current?.focus()}>Focus</Button>
    </form>
  );
};

However MyInput.type acrually refers to an internal easyblocks wrapper component ComponentBuilder which does not pass ref down the tree to the actual input component resolved in runtime.

See PR https://github.com/easyblockshq/easyblocks/pull/81