Duplicate/broken modals displayed

[bodom0015]

Problem

As discussed at length in #563, we have an issue with Semantic UI modals not behaving properly.

Sometimes, multiple modals are launched and all need to be dismissed before the user can once again interact with the dashboard. Other times no duplicate modals are shown, but the modal that is shown has form inputs that do not function.

Modals that appear to show these symptoms:

• Run Tale > Publish
• User Settings > Connect an API Key account
• User Settings > Revoke an external account

More investigation is definitely needed into what is going on here.

Steps to Reproduce

1. Login to the WholeTale Dashboard
2. Navigate to the "User Settings" view by selecting the nav in the dropdown at the top right
3. Beside "Dataverse", click "Connect Account"
   • A modal should appear
   • The dropdown should open automatically
4. Close the modal
   • The modal should close
5. Navigate to Browse by clicking the "Browse" link in the navbar at the top left
6. Repeat step 2 to navigate back to "User Settings"
7. Beside "Dataverse", click "Connect Account" again

Expected Results

• A modal should appear
• The dropdown should open automatically
• The dropdown should offer options for the target repository

Actual Results

• A modal appears
• The dropdown does not open automatically, and the text input to the right is focused instead
• The dropdown contains no options for the target repository

[ThomasThelen]

I'm linking this to #552 since the symptoms seem consistent. Some items are missing from the modal, unable to select things, etc.

[ThomasThelen]

I've come close to fixing this. Looking at this discord conversation from a while back, it looks like someone had to remove the modal from the dom once the modal closes.

Applying that solution, we stop getting the duplicate modal from the steps above. BUT. Since the modal is out of the dom, you need to refresh the page to open it again (ie you can't open the modal, close it, and then re-open it (since at this point it doesn't exist in the dom)).

      showConnectExtAcctModal(provider) {
        const component = this;
        component.set('selectedProvider', provider);
        component.apiCall.getExtAccountTargets(provider.name).then(targets => {
          component.get('selectedProvider').set('targets', targets);
          // Pop up a modal for choosing resource_server and entering a new API key
          $('#connect-apikey-modal').modal('show');
          $('#connect-apikey-modal').modal({
            onHidden: function(element) {
              $('#connect-apikey-modal').remove();
            },
          });
          $('#newResourceServerDropdown').dropdown();
        }, err => console.error("Failed to fetch provider targets:", err));
      },

Also relevant:
Semantic-Org/Semantic-UI#3200
https://stackoverflow.com/questions/35987586/semantic-ui-modal-duplicating/35988265

"The official ui-modal component does not move the modal DOM element outside of the containing component, thus creating numerous issues..." from https://github.com/CrushedPixel/ember-semantic-proper-modals

[ThomasThelen]

After playing around a little more more, I found a slightly more less functional (but more interesting) working PoC (see video below). I turned the modal into a {{#ui-modal}} and then removed the actions from it. I'm pretty sure that removing the actions is the part that's giving the non-duplicated-modal behaviour.

https://recordit.co/ZZIkS91GCh

Here's what the handlebar template for the modal looks like in that example

{{#ui-modal name="connect-apikey-modal" class="ui-modal-apikey" closable=false}}
  <i class="close icon"></i>
  <div class="header">
    {{!-- TODO: Helper to handle article appropriately? (e.g. "a/an ORCID Account") --}}
    <img class="ui avatar image" src="data:image/png;base64,{{selectedProvider.logo}}"> Connect {{selectedProvider.fullName}} Account
  </div>
  <div class="content">

    <form class="ui form">
      <div class="two fields">
        <div class="field">
          <label>{{selectedProvider.fullName}} Repository</label>
          <div id="newResourceServerDropdown" class="ui fluid selection dropdown">
            {{input type="hidden" name="newResourceServer" value=newResourceServer}}
            <i class="dropdown icon"></i>
            <div class="default text">Choose a repository...</div>
            <div class="menu">
              {{#each selectedProvider.targets as |target|}}
                <div class="item" data-value={{target}}>{{target}}</div>
              {{/each}}
            </div>
          </div>
        </div>
        <div class="field">
          <label>API Token 
            {{#if selectedProvider.docs_href}}
              <a href="{{selectedProvider.docs_href}}" style="float:right; font-weight:normal" target="_blank">Get from {{selectedProvider.fullName}} <i class="external square alternate icon"></i></a>
            {{/if}}
          </label>
          {{input type="text" name="API Token" placeholder="Enter an API key" value=newApiKey}}
        </div>
      </div>
    </form>
  </div>
  <div class="actions">
    <a class="ui deny button">
      Cancel
    </a>
    <a class="ui positive primary right button">
      Connect
    </a>
  </div>
{{/ui-modal}}

I ran across this by comparing against the Create New Tale modal which works fine. At some point I removed the actions and noticed semi-desirable (no duplicate modal, but no actions) behaviour.