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 https://github.com/sanusart/react-dropdown-select/issues/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