search

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.49k stars 255 forks source link

[ui5-multi-combobox]: the element scoping is not applied to the ui5-input from MultiComboBoxPopover when opening it in mobile device #9030

Closed zhangliangyi closed 1 month ago

zhangliangyi commented 3 months ago

Bug Description

The customized element scoping is not applied to the inner ui5-input from MultiComboBoxPopover which causes error when opening it in mobile device.

image

Affected Component

ui5-mutli-combobox

Expected Behaviour

The element scoping should be applied to the inner ui5-input

Isolated Example

https://stackblitz.com/edit/js-dmzxtg?file=index.html

Steps to Reproduce

  1. Open the link of isolated example above
  2. Open develop tools and toggle device to iPhone
  3. Click multi-combobox to open the selection

Log Output, Stack Trace or Screenshots

preview-b991ddc586eca.js:2 TypeError: Cannot read properties of null (reading 'querySelector') at get _innerInput (MultiComboBox.ts:1891:52) at MultiComboBox._beforeOpen (MultiComboBox.ts:1504:4) at z.handleEvent (lit-html.ts:2192:26) at ResponsivePopover._fireEvent (UI5Element.ts:864:19) at ResponsivePopover.fireEvent (UI5Element.ts:845:3) at ResponsivePopover._propagateDialogEvent (ResponsivePopover.ts:199:3) at ResponsivePopover._beforeDialogOpen (ResponsivePopover.ts:187:8) at z.handleEvent (lit-html.ts:2192:26) at Dialog._fireEvent (UI5Element.ts:864:19) at Dialog.fireEvent (UI5Element.ts:845:3)

Priority

Medium

UI5 Web Components Version

1.24.3

Browser

Edge

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

Todor-ads commented 3 months ago

Hello @SAP/ui5-webcomponents-topic-rl ,

Please take a look at this reproducible issue.

Best regards, Todor

niyap commented 2 months ago

Hello @zhangliangyi,

The issue is fixed via #9066, so I am closing the incident.

Kind Regards, Niya

zhangliangyi commented 2 months ago

@niyap After installing 1.24.4, the input element is displayed in mobile device, but the css selector inside it is using the tag selector which still causes error. https://github.com/SAP/ui5-webcomponents/blob/c8d5269148eab5aeda3166663b0d2fc0eb6d7a13/packages/main/src/MultiComboBox.ts#L1852

The css selector here should be [ui5-input].

But I found this issue is already fixed in the master branch. https://github.com/SAP/ui5-webcomponents/blob/bf8366eb6c8f52e15de249f32cfb8213e016370c/packages/main/src/MultiComboBox.ts#L1894

zhangliangyi commented 2 months ago

@ilhan007 Could you please take a look at my comment above?

ilhan007 commented 1 month ago

Hello @zhangliangyi thank you for exploring the problem, the fix has been downported to 1.24

It's now merged in the 1.24 branch with this commit

and will be shortly released with 1.24.X patch

ilhan007 commented 1 month ago

The fix has been downported to 1.24 and released with 1.24.7