selectmenu('refresh') crashes with "Uncaught TypeError"

On a Wordpress website I am using jQuery 3.1.0 and jQuery UI 1.11.4 from Google CDN:

function my_enqueue_scripts() 
{
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_deregister_script ( 'jquery' );
    wp_deregister_script ( 'jquery-ui' );
    wp_deregister_script ( 'jquery-migrate' );

    wp_enqueue_style( 'jquery-ui-smoothness', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css' );
    wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js' );
    wp_enqueue_script( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js' );
    wp_enqueue_script( 'pixi-script', '//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js' );
    wp_enqueue_script( 'utils-script', '/words/Utils.js' );
    wp_enqueue_script( 'small-tile-script', '/words/SmallTile.js' );
    wp_enqueue_script( 'big-tile-script', '/words/BigTile.js' );
    wp_enqueue_script( 'words-script', '/words/Words.js' );
}

And when I create a jQuery UI selectmenu and then try to refresh it with the following test code -

HTML:

<select id="gamesMenu">

JavaScript:

"use strict";

jQuery(document).ready(function($) {

    console.log('selectmenu 1');
    $('#gamesMenu').selectmenu({ disabled: true });
    console.log('selectmenu 2');
    $('#gamesMenu').selectmenu('refresh');          // THIS CRASHES
    console.log('selectmenu 3');
});

then unfortunately it fails with:

jQuery.Deferred exception: Cannot read property 'eq' of undefined TypeError: Cannot read property 'eq' of undefined
    at _getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12513:24)
    at ._getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25)
    at refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12362:40)
    at .refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25)
    at HTMLSelectElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:508:39)
    at Function.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:368:19)
    at jQuery.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:157:17)
    at jQuery.$.fn.(anonymous function) [as selectmenu] (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:494:9)
    at HTMLDocument.<anonymous> (http://slova.de/words/Words.js?ver=4.5.3:400:25)
    at mightThrow (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:3508:29) undefined

Which refers to the following code in 1.11.4/jquery-ui.js:

_getSelectedItem: function() {
    return this.menuItems.eq( this.element[ 0 ].selectedIndex );
},

Here the screenshot in Google Chrome browser for Mac:

How to fix or workaround this please?

To give more context in my real JavaScript code I repeatedly get JSON data via WebSocket connection and have to update the HTML select menu (and thus to call selectmenu('refresh'):

function updateMenu() {
        var yourGroup = ['<optgroup label="YOUR TURN">'];
        var hisGroup = ['<optgroup label="HIS TURN">'];

        for (var game in games) {
                var myturn = (game.played1 < game.played2);
                if (myturn) {
                         yourGroup.push(
                                '<option value="' +
                                game.gid +
                                '">Game #' +
                                game.gid +
                                '</option>'
                        );
                } else {
                        hisGroup.push(
                                '<option value="' +
                                game.gid +
                                '">Game #' +
                                game.gid +
                                '</option>'
                        );
                }
        }

        yourGroup.push('</optgroup>');
        hisGroup.push('</optgroup>');

        $('#gamesMenu')
                .empty()
                .append(yourGroup.length > 2 ? yourGroup.join('') : '')
                .append(hisGroup.length > 2 ? hisGroup.join('') : '')
                .selectmenu('refresh')     // THIS CRASHES
                .selectmenu('option', 'disabled', 
                    yourGroup.length <= 2 && hisGroup.length <= 2);
}

$('#gamesMenu').selectmenu({ 
    disabled: true });
    select: function(e, ui) {
            updateButtons();
            updateBoard();
});

Ok, it seems to be the jQuery bug #10662.

I have workarounded it by adding an <option>No games found</option> and disabling the select menu, when there are no other options:

var noGames = (yourGroup.length <= 2 && hisGroup.length <= 2);
$('#gamesMenu')
        .empty()
        .append(yourGroup.length > 2 ? yourGroup.join('') : '')
        .append(hisGroup.length > 2 ? hisGroup.join('') : '')
        .append(noGames ? '<option>No games found</option>' : '')
        .selectmenu('refresh')
        .selectmenu('option', 'disabled', noGames);

I guess another workaround would be to download the 1.11.4/jquery-ui.js locally and adding the check:

if ( !this.menuItems || this.menuItems.length == 0) {

or to wait for 1.12.x version.