SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.5k stars 258 forks source link

[ui5-multi-combobox]: popover is not open on dynamically loading of items #8202

Open JJPandari opened 7 months ago

JJPandari commented 7 months ago

Describe the bug

when dynamically change multi combobox's candidates with an async api, the drop down list doesn't show on first type. User needs an extra input to see the drop down.

Isolated Example

https://codesandbox.io/p/sandbox/sweet-voice-554lhx

Reproduction steps

in the sandbox:

type j expected: one can see a drop down list with candidates including "Jane" actual: no drop down there

this is partially usable if the user knows the bug: type o after j, the user can see the list including "Jane", then after 1 second(duration for the fake api), the list will change to "JoJo...", which is correct for input jo, now if the user wants to see the list for j, he can type <backspace>.

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

~1.24.0

UI5 Web Components Version

~1.21.2

Browser

Firefox

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

Lukas742 commented 7 months ago

Hi @JJPandari

Please follow the guidelines for opening issues. "[Component Name]: [Bug Description]" doesn't give information of the affected component and neither of what the issue is about.


I've simplified your example to isolate the issue: https://codesandbox.io/p/devbox/exciting-kare-wffn65?file=%2Fsrc%2FApp.jsx%3A50%2C52

This is not related to the issue, but in your original codeSandbox, you're mutating variables which are used in the render of the React component. This can cause side-effects in React which are hard to debug (e.g. see here).

Since the issue is reproducible without our wrapper and without React, I'm going to forward it to the ui5-webcomponents repo, since the MultiComboBox is developed there.


Hi colleagues,

here you can find a codeSandbox using only ui5-webcomponents without our wrapper or React.

The reproduction steps are the same as described by @JJPandari.

When typing "j", there are no MultiComboBoxItem with matching character and therefore the popover is not expanded, I'm not sure if the popover should be opened if the default slot changed while focused. Maybe offering a showPopover or openPopover method could also help here.

Todor-ads commented 7 months ago

Hello @SAP/ui5-webcomponents-topic-rl , can you look into this problem? In the example provided by @Lukas742 you can reproduce the problem (https://codesandbox.io/p/sandbox/ui5-webcomponents-forked-w9zx65?file=%2Fsrc%2Findex.js%3A38%2C37-38%2C45)

Best regards, Todor

elenastoyanovaa commented 6 months ago

Hello @JJPandari,

The current behavior is correct, as the multi combo box expects to have items in order to filter them based on the user input. The input event (to which you have attached) is fired after all of the oninput handling inside the component.

My suggestions would be to load the items beforehand for the multi combo box to have its options available. By nature the combobox and multi combo box components provide options (predefined) which the user could explore, before filtering. Your use case looks more like the items you provide serve as sugggestions, available after the user input. If this is the case my suggestion is to use the input or multi input components, which act as input field with suggestions, rather than options.

If you think that input and multi input are not the correct components for you, we can continue with this as a feature request. If this is so please provide your input, which API will suit you best:

Kind Regards, Elena

JJPandari commented 6 months ago

Hi Elena, I think

support for open/close of multi combo box

is better for now, it's easier to implement, also more flexible and may help other people with some other rare use cases.

elenastoyanovaa commented 6 months ago

Hello colleagues,

A feature is requested for a open API for the ui5-multi-combobox component.

Kind Regards, Elena

hristop commented 6 months ago

May be partially relates to #7678