Using portal prop closes dropdown when clicking interactable areas in the dropdown

[shirleyxiao1103]

Hello,
I'm utilizing the props portal to show the dropdown in the document.body like the example you have in your examples. However when I add the portal, anywhere I click inside the dropdown closes the dropdown and calls onDropdownClose. e.g if I try to click into the input field or if I try to click on an option while in multi select. At the moment the only way I can keep it open is if I utilize the keepOpen prop. Have any ideas on what could be closing the dropdown right away?

These are the other props I am currently using as well

<Select
        className={classNames.join(' ')}
        // dropdownPosition={dropdownPosition}
        // keepOpen={keepDropdownOpen}
        options={data}
        values={selectedOptions}
        disabled={isDisabled}
        dropdownGap={0}
        closeOnSelect={false}
        multi={isMulti}
        backspaceDelete={false}
        dropdownRenderer={customDropdownRenderer}
        contentRenderer={customContentRenderer}
        dropdownHandleRenderer={({ state }) => customDropdownHandleRenderer({ state, isMobile })}
       // onDropdownOpen={(e) => {
        //   onDropdownOpen(e);
        //   calculateDropdownSize();
        //   setKeepDropdownOpen(true);
        // }}
        onDropdownClose={(event) => {
          handleDropdownClose(event);
          console.log('onDropdownClose: ', event);
        }}
        handleKeyDownFn={handleKeyDownFn}
        portal={typeof document !== `undefined` && document.body}
        additionalProps={additionalProps}
      />

[sanusart]

Hey. It’s hard to say. Usually if clicking outside the drop-down would close. But in your case maybe it is not detecting that the click is inside dropdown? Any chance you can reproduce it in some sandbox to share?

…

On Wed, 31 Jan 2024 at 4:23 AM Shirley ***@***.***> wrote: Hello, I'm utilizing the props portal to show the dropdown in the document.body like the example you have in your examples. However when I add the portal, anywhere I click inside the dropdown closes the dropdown and calls onDropdownClose. e.g if I try to click into the input field or if I try to click on white space in the dropdown. At the moment the only way I can keep it open is if I utilize the keepOpen prop. Have any ideas on what could be closing the dropdown right away? These are the other props I am currently using as well <Select className={classNames.join(' ')} // dropdownPosition={dropdownPosition} // keepOpen={keepDropdownOpen} options={data} values={selectedOptions} disabled={isDisabled} dropdownGap={0} closeOnSelect={false} multi={isMulti} backspaceDelete={false} dropdownRenderer={customDropdownRenderer} contentRenderer={customContentRenderer} dropdownHandleRenderer={({ state }) => customDropdownHandleRenderer({ state, isMobile })} // onDropdownOpen={(e) => { // onDropdownOpen(e); // calculateDropdownSize(); // setKeepDropdownOpen(true); // }} onDropdownClose={(event) => { handleDropdownClose(event); console.log('onDropdownClose: ', event); }} handleKeyDownFn={handleKeyDownFn} portal={typeof document !== `undefined` && document.body} additionalProps={additionalProps} /> — Reply to this email directly, view it on GitHub <#308>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACBLRXSG6GWDFVY7YAHD63YRGTKLAVCNFSM6AAAAABCSIYI3CVHI2DSMVQWIX3LMV43ASLTON2WKOZSGEYDSMJVGQ4TEOI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[shirleyxiao1103]

One other thing I found is that if I disable the input field and click on that area it is fine.

Yup let me try recreating in a sandbox and will send it.

[shirleyxiao1103]

here is a link with an example with clicking into input closes the dropdown, but clicking beside the input in the dropdown is fine https://codesandbox.io/p/sandbox/react-dropdown-select-example-y3cg9x?file=%2Fsrc%2FApp.js%3A24%2C50

Edit: seems like is related to position:relative

[sanusart]

Hey, I tryed here with regular input and it does not have the behaiviour
I am not sure how chackra UI is behaiving.

Try to see if the search in the select not needed, Maybe it is stilling the focus?

[shirleyxiao1103]

yea maybe 🤔 I also tried that if I use a regular input and wrap that with a div that has position: relative the issue appears