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>
  );
};

edit: this is an issue with popper and can be fixed with popper={false}. not relevant to this issue

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[jasperfirecai2]

@mrholek did you manage to find a fix for the autoClose?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[jasperfirecai2]

Not stale, still an issue until closed by holek

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[mrholek]

@jasperfirecai2 working on it