[Input]: Safari ValueStateMessage causes blur

[JarrettChan]

Bug Description

When the Input ValueStateMessage is triggered by focusing the Input, it causes a blur and the ValueStateMessage is still visible. This interrupts the usage as the Input is no longer focused. The input still can be used because the ValueStateMessage is still open after the blur.

Affected Component

ui5-input

Expected Behaviour

ValueStateMessage should not cause blur when shown.

Isolated Example

No response

Steps to Reproduce

1. Safari Version 17.1 (19616.2.9.11.7)
2. https://sap.github.io/ui5-webcomponents/playground/?path=/story/main-input--value-state-message
3. Tab into the input Observe: ValueStateMessage is visible, but focus was blurred
4. Tab into the input again Observe: ValueStateMessage is visible and focus is in input

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.18.0, 1.19.1, 1.20.0

Browser

Safari

Operating System

No response

Additional Context

No response

Organization

SuccessFactors

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[unazko]

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

The value state popup appears for the input field:

Best regards, Boyan

[MapTo0]

@SAP/ui5-webcomponents-topic-rd

The Popover has some issues with positioning: https://sap.github.io/ui5-webcomponents/playground/?path=/story/main-popover--basic

[MapTo0]

Possible regression: https://github.com/SAP/ui5-webcomponents/pull/7870

[petyabegovska]

Hello, the issue looks more general as the popover is not visible or wrongly positioned in all the inputs on Safari- you can check also ui5-combobox and ui5-select in Storybook: https://sap.github.io/ui5-webcomponents/nightly/playground/?path=/docs/main-combo-box--docs. That's why I increase the priority to high.

Best regards, Petya

[ilhan007]

Hello @JarrettChan can you retest, we have merged and released a fix with 1.20.1 https://sap.github.io/ui5-webcomponents/nightly/playground/?path=/story/main-input--value-state-message

[JarrettChan]

Hi @ilhan007, The popover position looks good, but that is not my issue. The issue I reported is that when you focus an Input with ValueStateMessage in Safari, it immediately blurs. This is not fixed.

Typing into the storybook Input can obviously show the issue as it shows error state after typing and blurs.

[MapTo0]

Snippet to reproduce this with a popover only:

<input id="opener" />
<ui5-popover id="popup" _disable-initial-focus></ui5-popover>

<script>
  const opener = document.getElementById("opener");

  opener.addEventListener("focusin", event => {
    document.getElementById("popup").showAt(opener, true);
  });

  opener.addEventListener("blur", event => {
    console.log("=========== BLUR =========");
  });
</script>

[kskondov]

Hello @JarrettChan and @MapTo0 as I was not able to reproduce this issue can you confirm that it is still reproducible on your side?

Best Regards

[MapTo0]

I am not able to reproduce it as well. Maybe Apple did some changes @JarrettChan how about you?

[kskondov]

After feedback from @MapTo0 and @JarrettChan I am closing this issue as not reproducible