Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Responsive Popover / MultiCombobox ]: Responsive Popover with State Opener and MCB closes when clicking MCB Item #10006

Open
1 task done
gitgdako opened this issue Oct 10, 2024 · 3 comments · May be fixed by #10030
Open
1 task done
Assignees
Labels
bug This issue is a bug in the code Medium Prio TOPIC RL

Comments

@gitgdako
Copy link

Describe the bug

{ ResponsivePopover, Button, MultiComboBox, MultiComboBoxItem } from '@ui5/webcomponents-react';

A ResponsivePopover can/shoud be opened using a React State (https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/modals-popovers-responsivepopover--docs) and closed clicking outside if not modal
If the ResponsivePopover contains a MultiCombobox when clicking inside the MCB Popover the close event is propagated to the ResponsivePopover itself which then closes the popover

From the Stackblitz Reproducer:

      const [open, setOpen] = useState(false);
      ...
      <ResponsivePopover
        opener="..."
        open={open}
        // this is necessary to be able to reopen the popup when clicking outside to close it
        onClose={() => setOpen(false)}
      >
        <MultiComboBox
          // this is necessary to prevent the event to be propagated to the responsive popover
          // onClose={(e) => {
          //   e.preventDefault();
          //   e.stopPropagation();
          // }}
        >
          <MultiComboBoxItem key={'key'} text={'Click me'} />
        </MultiComboBox>
      </ResponsivePopover>

Isolated Example

https://stackblitz.com/edit/github-dlhafz

Reproduction steps

  1. https://stackblitz.com/edit/github-dlhafz
  2. Click button -> Responsive Popover opens
  3. Click MCB Arrow down -> MVB Popover opens
  4. Click MCB Element
  5. Responsive Popover closes

Expected Behaviour

Responsive Popover should stay open

Screenshots or Videos

No response

UI5 Web Components for React Version

2.2.0

UI5 Web Components Version

2.3.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@gitgdako gitgdako added the bug This issue is a bug in the code label Oct 10, 2024
@Lukas742
Copy link
Collaborator

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

Similiar issues: #9484, #9909

@Lukas742 Lukas742 transferred this issue from SAP/ui5-webcomponents-react Oct 10, 2024
@NHristov-sap
Copy link
Contributor

Hello @ui5-webcomponents-topic-rd,

The issue is reproducible by following the steps listed above, so I am forwarding this issue to you.

Best Regards,
Nikolay Hristov

@gitgdako
Copy link
Author

NotificationListItem with showClose on pressing the Close/X Button within a ResponsivePopover has the same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue is a bug in the code Medium Prio TOPIC RL
Projects
Status: In progress
Development

Successfully merging a pull request may close this issue.

4 participants