[Modal] - Neutral action button does not close modal

[dreaming-augustin]

As previously reported here: https://github.com/Semantic-Org/Semantic-UI/issues/4507

Steps

Open MODAL with neutral action button (button without approve or deny class). Click the "neutral" button.

Expected Result

The modal should close.

Actual Result

The modal does nothing and stays on screen.

[ColinFrick]

Could you provide a jsfiddle? Fork this https://jsfiddle.net/ca0rovs3/

[dreaming-augustin]

https://jsfiddle.net/ca0rovs3/1102/

$('#delete-record.modal').modal({
                onDeny: function(element) {
                        alert("onDeny");
                },
                onApprove: function(element) {
                        alert("onApprove");
                },
        });
$('#delete-record.modal').modal('show');

        <div id="delete-record" class="ui small modal">
                <div class="header">Delete this record?</div>
                <div class="actions">
                        <div class="ui close button">Cancel</div>
                        <div class="ui negative button">Delete</div>
                </div>
        </div>

[dreaming-augustin]

The ".close" class should not even be necessary, according to the documentation.

[dreaming-augustin]

Workaround: use a close icon:

<code>
        <div id="delete-record" class="ui small modal">
                <i class="close icon"></i>
                <div class="header">Delete this record?</div>
                <div class="actions">
                        <!-- <div class="ui close button">Cancel</div> // Does not work. See https://github.com/Semantic-Org/Semantic-UI/issues/6540 -->
                        <div class="ui negative button">Delete</div>
                </div>
        </div>
</code>

[y0hami]

@dreaming-augustin try using attach events https://jsfiddle.net/b9hqxy0t/

[ColinFrick]

@hammy2899 Well the docs state:

Close actions are applied by default to all button actions, in addition an onApprove or onDeny callback will fire if the elements match either selector.

So this seems to be a bug.

[dreaming-augustin]

Thanks hammy2899 for the much better workaround, using "attach events". I'm using it now and it works perfectly.

As ColinFrick rightly pointed out, there is a disconnect between what the documentation says, and the reality. I think we agree, but to be sure: rather than editing the documentation, the best way to fix this disconnect in accordance with the Semantic-UI spirit, would be to fix the code so that, indeed, any action button closes the modal, which, it appears, was the original intention.

[dreaming-augustin]

Thank you for removing the "Usage Question" label.

According to the following nice article, any usage question can be (should be) considered a bug in itself, as such questions arise when the following two statements are both true:

• The software (or library) is not intuitive enough so that users encounters difficulties in making use of it.
• The documentation is lacking or otherwise unclear, so that a user, even one who has thoroughly examined the available documentation, is not clear on how to use it.

https://linux.overshoot.tv/blogs/augustin/hierarchy_contribution_open_source

Far from me the idea to put extra burden on the few active contributors, but in principle, if the "usage question" label is used as a synonym to "there is nothing broken, nothing to fix", then I'd object to it. May I suggest to discontinue its use altogether, and replace it with the label: "documentation needs improvement", or something to that effect... ?

[dreaming-augustin]

Speaking of intuitiveness of the library and the comprehensiveness of the documentation, I just searched for all mentions of "attach events" in the documentation.

When I first saw hammy2899's fiddle https://jsfiddle.net/b9hqxy0t/ , I was flabbergasted. I would never have thought one could achieve this in this way. And now, I still don't know how it works nor what's the logic behind it.
How does $('#delete-record.modal').modal('attach events', '#my-button'); translate as "close this modal"??

I only found two places where the attach event API is mentioned:

• https://semantic-ui.com/behaviors/api.html#attaching-api-events
• https://semantic-ui.com/modules/modal.html#attach-events Reading and re-reading the two sections above, I see nothing that could have led a user like myself to come up with the solution offered by hammy.

The only code example I found was this one: $('.test.modal').modal('attach events', '.test.button', 'show'); This attach events API is not mentioned in the "Usage" and "Settings" tab of the modal module documentation. Am I to understand that the attach events argument can take any of the behaviour names listed here? https://semantic-ui.com/modules/modal.html#behavior

How are we to guess that hide is the default behaviour, when a modal attach events is attached to a DOM element without arguments??

[dreaming-augustin]

Most importantly, I wanted to use this opportunity to express my gratitude to:

• Jack, the creator of Semantic-UI: it is in essence a great library that has a much greater potential that the one it has already achieved. The basic principles are sound, and Jack's achievements are astounding.
• people like ColinFrick and hammy2899 for keeping the project alive with their contributions, patches, and fixes and most importantly for the community fork, Fomantic-UI. Thanks.