Blockly workspace dropdown UI persists upon switching nav tabs

[abid salahi]

Hi there,

I'm having difficulty fixing a consistent issue that shows up in my application, which is involving the workspace UI. The drop downs or even inputs seem to persist on the front of the UI upon changing tabs if they have not been closed. I've tried setting some opacity styling for my tabs and the div that contains the workspace, but nothing seems to work. 

I'm attaching images below for reference;

workspace (located on "Strategy Builder" tab) has the drop down open for checking whether Math Number is even.

Tabs:

"Strategy Tester" Tab which I switch to before closing the drop down from the workspace.

Any help is appreciated since this is a big bug for my application.For further reference i'm attaching my html code for the tabs and pages below:

        <ul class="nav nav-tabs bg-dark" id="str-nav-tabs" role="tablist">            
            <li class="nav-item">
                <a class="nav-link active" id="str-builder-tab" href="#strategy-builder"  data-toggle="tab" role="tab" aria-controls="strategy-builder" aria-selected="true">Strategy Builder</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="str-tester-tab" href="#strategy-tester"  data-toggle="tab" role="tab" aria-controls="strategy-tester" aria-selected="false">Strategy Tester</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="config-tab" href="#configuration"  data-toggle="tab" role="tab" aria-controls="configuration" aria-selected="false">Config</a>
            </li>
        </ul>


        <div class="tab-content h-100 w-100">
            <!-- Strategy-builder tab content -->
            <div class="tab-pane fade show active h-100 w-100" id="strategy-builder" role="tabpanel" aria-labelledby="str-builder-tab">


                <div class="container-fluid h-100 w-100">
                    <!-- container div for injection of the blockly interface -->
                    <div class="container-fluid h-100 w-100" style="padding-bottom: 5%;" id="blocklyDiv"></div>
                    <!-- Hidden divs for the purpose of holding and passing data -->
                    <div id="blocklyToolbox" style="display: none"></div>
                    <div id="blocklyWorkspace" style="display: none"></div>
                </div>
            </div>


            <!-- Strategy Tester tab content -->
            <div class="tab-pane fade" id="strategy-tester" role="tabpanel" aria-labelledby="str-tester-tab">
                <div class="row" style="margin: 1%;">
                    <div class="col-sm-4">
                        <p>List of all available strategies:</p>
                        <div class="progress" id="progress-bar-wrapper-strats" style="margin-top: 3%; margin-bottom: 3%; display: none;">
                            <div class="progress-bar progress-bar-striped" id="load-strats-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="alert alert-danger alert-dismissible fade show" id="import-msg-wrapper" role="alert" style="display: none;">
                            <strong>Import failed!</strong>
                            <p class="text-left" id="import-fail-msg"></p>
                            <button type="button" class="close" data-hide="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <input id="selectAllCheckBox" type="checkbox" disabled>
                        <label class="checkbox-inline" aria-describedby="selectAllCheckBox" id="checkAllBoxLabel" for="selectAllCheckBox">Select All</label>
                        <div class="rounded border border-dark">
                            <ul class="list-group" id="all-str-list"></ul>
                        </div>
                        <button type="button" id="deleteStrategyBtn" class="btn btn-primary btn-sm" style="margin-top: 3%;" disabled>Delete Selected Strategies</button>
                        <form>
                            <div class="form-group">
                                <label for="loadMultipleStratsInput" style="margin-top: 3%;">Select any number of strategies:</label>
                                <input type="file" class="form-control-file" id="loadMultipleStratsInput" accept="text/xml" multiple>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-4">
                        <p>Tournament strategies:</p>
                        <div class="rounded border border-dark">
                            <ul class="list-group" id="tournament-str-list"></ul>        
                        </div>
                        <button type="button" id="runTournamentBtn" class="btn btn-primary btn-sm" style="margin-top: 3%;" disabled>Run Tournament</button>
                    </div>
                    <div class="col-sm-4">
                        <table class="table table-striped table-dark" id="resultsTable">
                            <thead id="resultsTableHead">
                                <tr>
                                    <th scope="col">Strategy</th>
                                    <th scope="col">Score</th>
                                </tr>
                            </thead>
                            <tbody id="resultsTableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>


            <!-- Config tab content -->
            <div class="tab-pane fade" id="configuration" role="tabpanel" aria-labelledby="config-tab">

            </div>
        </div>

[Neil Fraser]

On Thu, 13 Jun 2019 at 12:20, abid salahi <abidsal...@gmail.com> wrote:

I'm having difficulty fixing a consistent issue that shows up in my application, which is involving the workspace UI. The drop downs or even inputs seem to persist on the front of the UI upon changing tabs if they have not been closed. I've tried setting some opacity styling for my tabs and the div that contains the workspace, but nothing seems to work.

Add this call to your tab event handler:

  Blockly.hideChaff();

That will close all dropdowns, tooltips, menus, and other absolutely positioned high z-indexed objects.

--

Neil Fraser
https://neil.fraser.name

[abid salahi]

Thanks a lot Neil, fixed my problem!