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.51k stars 263 forks source link

ui5-textarea in valueState Error breaks in chrome #7147

Closed ixiler closed 1 year ago

ixiler commented 1 year ago

Bug Description

When the ui5-textarea component is in a valueState Error in chrome Version 114.0.5735.90 (Official Build) (x86_64) under macOS 13.4 then the textarea pops out and goes at the top of the page. If the valueState is changed back to None the text area returns to its' original spot

Affected Component

ui5-textarea

Expected Behaviour

ui5-textarea handles the Error state with no issues

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-textarea-invalid-bug-gt1k4g?file=/src/index.js

Steps to Reproduce

  1. Open the isolated example and observe the behaviour. In the given example the text area should be bellow the displayed text.

Log Output, Stack Trace or Screenshots

Screenshot 2023-06-05 at 14 34 43 Screenshot 2023-06-05 at 14 34 28

Priority

High

UI5 Web Components Version

1.13.0

Browser

Chrome

Operating System

macOS

Additional Context

This bug affects everyone using ui5-textarea under the specific chrome version. Probably will affect the other chromium browsers once they catch up to this version.

Organization

SAP Automation Pilot

Declaration

elenastoyanovaa commented 1 year ago

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

After the latest update of Chrome ui5-textarea components will throw an error in the console, when a value state is present. The root cause is that the popover is not correctly found by the _getPopover method and later the close popover method throws an error. The same could be reproduced when you later try to focus the textarea, then the openPopover method with cause an error. The issue could be reproduced in the latest playground, just set a value state to some textarea . Also you can see the error in the test pages. The same coding is used in the ui5-input, but there the mentioned method resolves the popover correctly. Additionally, I tested with FF and there no issue is present. (When I focused out, there is another error but I think that it is not related).

Can you process further?

Kind Regards, Elena

nnaydenow commented 1 year ago

Seems like new property to HTMLElement's is introduced with Google Chrome 1.114. This new property collides with some of our internal properties (named popover) where we store components' popovers.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

zhangliangyi commented 1 year ago

@ilhan007 @nnaydenow

We are receiving Service Now ticket from customer about this issue with v1.11.0 in production, just wonder if this fix will be also applied to the follow-up 1.11.x patch since I did not find it in the latest v1.11.1.