Open bodom0015 opened 4 years ago
I'm linking this to #552 since the symptoms seem consistent. Some items are missing from the modal, unable to select things, etc.
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: https://github.com/Semantic-Org/Semantic-UI/issues/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
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.
Problem
As discussed at length in https://github.com/whole-tale/dashboard/pull/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:
More investigation is definitely needed into what is going on here.
Steps to Reproduce
Expected Results
Actual Results