Safari 17.4 <select/> component display problem

Support
#1

Jmix version: 2.2.1
Jmix Studio plugin version: 2.2.0-233
IntelliJ IDEA 2023.3.3 (Community Edition)
Build #IC-233.14015.106, built on January 25, 2024
Runtime version: 17.0.9+7-b1087.11 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
GC: G1 Young Generation, G1 Old Generation
Kotlin: 233.14015.106-IJ
java 17.0.4 2022-07-19 LTS
Java™ SE Runtime Environment (build 17.0.4+11-LTS-179)
Java HotSpot™ 64-Bit Server VM (build 17.0.4+11-LTS-179, mixed mode, sharing)
Operating System: macOS 14.4 (23E214)
Metal Rendering: ON
File System: Case-Sensitive Journaled HFS+ (APFS)
Browser: Safari - Version 17.4 (19618.1.15.11.12)
Database: PostgreSQL 13

Hello Everyone

Just for your information, I have a very strange behavior with all of my <select/> components with Safari 17.4. After I make my selection, which closes the itemsEnum list, the list opens back up by itself quickly and closes again. This also happens when I select a filter’s item in a list view’s filter, which is automatically provided by framework.

This does not happen with Google Chrome Version 122.0.6261.129 (Official Build) (x86_64) or with Firefox Version 124.0 (64-bit).

Please see this video:

Here is the XML descriptor of the view in the video:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<view xmlns="http://jmix.io/schema/flowui/view"
      title="msg://languageDetailView.title"
      focusComponent="formLayout">
    <data>
        <instance id="languageDc"
                  class="com.company.nf.entity.Language"
                  fetchPlan="_base">
            <loader/>
        </instance>
    </data>
    <facets>
        <dataLoadCoordinator auto="true"/>
    </facets>
    <actions>
        <action id="saveAction" type="detail_saveClose"/>
        <action id="closeAction" type="detail_close"/>
    </actions>
    <layout>
        <formLayout id="formLayout" dataContainer="languageDc">
            <select id="nameSelect" property="name"/>
            <select id="spokenLevelSelect" property="spokenLevel" itemsEnum="com.company.nf.entity.Rating"/>
            <select id="writtenLevelSelect" property="writtenLevel" itemsEnum="com.company.nf.entity.Rating"/>
        </formLayout>
        <hbox id="detailActions">
            <button id="saveAndCloseBtn" action="saveAction"/>
            <button id="closeBtn" action="closeAction"/>
        </hbox>
    </layout>
</view>

Has anyone seen this before, reported it to Apple, or the Webkit team or Vaadin?

Thanks in advance for your feedback.

Best regards
Chris

#2

Hi Chris!

Thank you for reporting the problem. I didn’t find a related issue in the Vaadin issue tracker, so I had to create a new one.

There is the link: Component overlay opens multiple times in Safari · Issue #7245 · vaadin/web-components · GitHub
We will wait for a response from the Vaadin team.

UPD: Vaadin’s reply:

Tested and could not reproduce in Safari 17.3.1
Confirmed that since Safari 17.4 it fails. This seems like a bug in Safari that we might need to workaround.

So we are waiting for a fix from Vaadin.

Best regards,
Dmitriy

#3

@d.kremnev

Hi Dmitriy

Thank you for the information and your support. I will keep this topic open until it has been completely resolved and will update it in the meantime if necessary or helpful.

Best regards
Chris

1 Like