Select in Form is not displayed completely when using Custom UI

Forge Forge UI Kit and Custom UI
4

You can further constrain the size of the select list by using the maxMenuHeight prop and setting it to less than the height of your div to make sure it doesn’t overflow.

Update: here’s a smarter way of doing it:

function Edit({ context }) {
  const [configuration, setConfiguration] = useState();
  const [height, setHeight] = useState();
  const ref = useRef();

  const onSubmit = (formData) => {
    view.submit(formData);
  };

  useEffect(() => {
    setConfiguration(context.extension.gadgetConfiguration);
  }, []);

  if (!configuration) {
    return "Loading...";
  }

  const setformheight = () => {
    setTimeout(() => {
      const containerHeight = ref.current.getBoundingClientRect().height;

      const selectHeight = ref.current
        .querySelector("#react-select-gadget-listbox")
        .getBoundingClientRect().height;

      setHeight(containerHeight + selectHeight);
    }, 0);
  };

  return (
    <div style={{ height }} ref={ref}>
      <Form onSubmit={onSubmit}>
        {({ formProps, submitting }) => (
          <form {...formProps}>
            <Field name="fn" label="Function">
              {({ fieldProps: { ...rest }, error }) => (
                <Fragment>
                  <Select
                    instanceId="gadget"
                    style={{ background: "black" }}
                    defaultValue={
                      configuration.fn
                        ? {
                            label: configuration.fn.label,
                            value: configuration.fn.value,
                          }
                        : ""
                    }
                    onMenuOpen={setformheight}
                    onMenuClose={() => setHeight(undefined)}
                    options={FUNCTIONS}
                    {...rest}
                  />
                </Fragment>
              )}
            </Field>
            <ButtonGroup>
              <Button type="submit" isDisabled={submitting}>
                Save
              </Button>
              <Button appearance="subtle" onClick={view.close}>
                Cancel
              </Button>
            </ButtonGroup>
          </form>
        )}
      </Form>
    </div>
  );
}

You might want to make the div container a flexbox so that the select list isn’t covering it when it’s in an open state but I’ll leave that as an exercise for you.

1 Like