Q: dropdown in form is floating in the page using ant design using getPopupContainer? I have tried to search my issue for a day and can not find a solution here. I am sorry if the question already been asked.
Here is what I am trying to achieve:
I have a dropdown in select, both are inside form.
I am using ant design in react and typescript application.
The issue is when I click on the dropdown, if the dropdown at the bottom of the form, it will not show all the elements in the dropdown; I have included images to further show the problem.
https://i.stack.imgur.com/VWYUG.png
This is what I have tried to do:
I can see all dropdown elements even the last dropdown in the form, but the issue is when I do not select an element from the dropdown and do not close it, the dropdown remain opens and floating in the page until I click something.
    <Form layout="inline">
      <div>
        <Form.Item name="ordering" label={label} style={{ minWidth: size(5) }}>
          <Select
            dropdownStyle={{ position: "fixed" }}
            showSearch
            options={screens ? getScreenOptions(screens) : []}
            onChange={(e) => {
              if (screens) {
                onFieldsMove(fields, screen, screens[e as number]);
              }
            }}
            getPopupContainer={(triggerNode: HTMLElement) =>
              (triggerNode?.parentNode as HTMLElement) || document.body
            }
          />
        </Form.Item>
      </div>
    </Form>
  );

export const getScrollParent = (node: HTMLElement | undefined): HTMLElement => {
  if (!node) {
    return document.body;
  }
  if (node.scrollHeight < node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode as HTMLElement);
  }
}; ```

Can some please explain to me the getScrollParent function?

I am sorry if I am asking basic questions, I am new developer.  


 


  [1]: https://i.stack.imgur.com/VWYUG.png

