WooCommerce admin orders table - form triggering link

Question

I'm embedding a form in the admin orders list if an order has a certain status. Code:

function bkf_petals_actions( $column, $post_id ) {
    $bkfoptions = get_option("bkf_petals_setting");
        if ( $column == 'wc_actions' ) {
            $order = wc_get_order( $post_id );
            if ( $order->has_status( 'new' ) ) {
                $nonce = wp_create_nonce("bkf_petals_decision_nonce");
                $pid = get_post_meta($post_id,'_petals_on',1);
                   $url = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
                $acceptlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
                $rejectlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=reject&nonce='.$nonce.'&code=');
                echo '<form action="'.$url.'" method="get" id="petals-decision-'.$post_id.'-form">
                <input type="hidden" name="action" value="petals_decision" />
                <input type="hidden" name="petalsid" value="'.$pid.'" />
                <input type="hidden" name="nonce" value="'.$nonce.'" />
                <input type="hidden" name="orderid" value="'.$post_id.'" />
                <select name="decision" id="petals-decision-'.$post_id.'-select" class="petals-decision" style="width:150px;" required>
                <option value="" disabled selected>Select an action...</option>
                <optgroup label="Accept">
                <option value="accept">Accept Order</option>
                </optgroup>
                <optgroup label="Reject">
                <option value="293">Cannot deliver flowers</option>
                <option value="294">Don\'t have the required flowers</option>
                <option value="270">We cannot deliver to this location ever</option>
                <option value="280">Cannot deliver to this location today</option>
                <option value="281">Do not have these flowers but could do a florist choice</option>
                <option value="282">Do not have any flowers to meet delivery date</option>
                <option value="272">Need more information to deliver this order</option>
                <option value="283">Do not have this container but could do with a substitution of container</option>
                <option value="273">Do not do this product ever</option>
                <option value="274">There is a problem with this address</option>
                <option value="284">This area is restricted, can go on next run but not this delivery date</option>
                <option value="285">This area is restricted and can\'t be delivered until next week</option>
                </optgroup>
                </select>
                <input type="submit" />
                </form>';
        }
    }
}

It's rendering as you would expect visually:

Image of rendered form

Here's my problem - as soon as you click on the select field to drop down its options, it triggers the underlying link of the whole row and navigates to the order edit page.

Any ideas? Am I missing something?

Answer 1

@martin-mirchev hit the nail on the head - need to set the z-index of the <select> element to at least 20ish