CDropdown closes when clicking scrollbar from CDropdownMenu overflow

[jasperfirecai2]

Report

When using autoClose={true} (default) or autoClose='inside', clicking on a scrollbar also autocloses the dropdown, making scrolling inaccessible except via scroll-wheel or keyboard. This is a regression compared to coreui v3
Example code:

<CDropdown direction="center">
  <CDropdownToggle
    caret={false}
  >
    <div>open dropdown</div>
  </CDropdownToggle>
  <CDropdownMenu style={{maxHeight: '25vh', overflowY: "auto"}}>
    {[...Array(10).keys()].map(item => (
      <CDropdownItem key={item} href="#" role="menuitem">
        {item}
      </CDropdownItem>
    ))}
  </CDropdownMenu>
</CDropdown>

Details

• Operating system and version: Windows 11
• Browser and version: Firefox stable

[mrholek]

@jasperfirecai2 I will fix it in the next release.

[jasperfirecai2]

Many thanks for the quick reply. I also seem to be getting a warning about a browser issue regarding scroll events when i switched to state-controlled visibility.. This sometimes makes the dropdown bug out and float at 0,0 of the document. not 100% sure this code alone can reproduce it. example code below.

want me to make another issue for that?

const ExampleComponent = () => {
  const [dropdownVisible, setDropDownVisible] = useState(false);

  const handleSelect = (_event) => {
    setDropDownVisible(false);
  };

  return (
    <CDropdown
      direction="center"
      visible={dropdownVisible}
      onHide={() => setDropDownVisible(false)}
      onShow={() => setDropDownVisible(true)}
      autoClose="outside"
    >
      <CDropdownToggle
        caret={false}
        onClick={() => setDropDownVisible(!dropdownVisible)}
      >
        <div>toggle dropdown</div>
      </CDropdownToggle>
      <CDropdownMenu style={{maxHeight: '25vh', overflowY: "auto"}}>
        {[...Array(10).keys()].map(item => (
          <CDropdownItem
            key={item}
            onClick={handleSelect}
            href="#"
            role="menuitem"
          >
            {item}
          </CDropdownItem>
        ))}
      </CDropdownMenu>
    </CDropdown>
  );
};