SELECT element stuck open in Post editor metabox (only Safari)

Hello!

I’ve encountered a bug for HTML SELECT dropdowns in the post editor metabox. They get stuck in the “open” position after being clicked. The bug occurs only in Safari and only in the normal metabox position; they don’t get stuck when the metabox is positioned to the side.

Monitoring the event firing cycle on the SELECT element, it seems that the mouseup event never fires after the mouse down event opens the SELECT. This prevents the dropdown from closing, and also prevents clicking on any other element on the screen. Only by clicking in rapid succession does the dropdown finally close.

My suspicion is that this is a conflict with events on the resize handle bar above the meta boxes. I’ve tried disabling JQuery’s sortable UI on the metabox to no avail, however. I’ve also tried forcing the mouseup event to fire after the SELECT’s onchange event. And I’ve also tried disabling the events on every ancestor element of the metabox – no luck.

A workaround is to clone and destroy the SELECT on each change event, as well as re-attaching any custom events I need to fire on the select, but it’s obviously not an ideal solution.

I’m using the most up to date Safari, v18.3 on Sequoia.

Steps to reproduce:

1. Create Test block

// create test block in terminal
npx @wordpress/create-block@latest test-block --variant=dynamic --wp-env

// add the following to the block's main plugin file (test-block.php)
function meta_box_callback($post)
{
    echo "<select id='some-id'><option>1</option><option>2</option></select>";
    echo "<select  id='another-id'><option>1</option><option>2</option></select>";
};

// create metabox
function handle_add_meta_box()
{
    add_meta_box(
        'event-metabox',
        __('Event details'),
        'meta_box_callback',
        'post',
        'normal',
        'high'
    );
};

add_action('add_meta_boxes', 'handle_add_meta_box');

2. Spin up wordpress

wp-env start && nom run start

3. Open Safari -> Login to WordPress, go to edit the sample “Hello World” post

4. In the main metabox you’ve created, “Event details”, try selecting both Select elements. The first one selected should get stuck in the open position.

(edited for clarity/typos)

• This topic was modified 1 month, 2 weeks ago by aslamhus.
• This topic was modified 1 month, 2 weeks ago by aslamhus.
• This topic was modified 1 month, 2 weeks ago by aslamhus.