Trying to use USWDS modal. Works if I don't pass argument to on method, doesn't work if I do #5390

dajones537 · 2023-07-18T20:45:27Z

dajones537
Jul 18, 2023

I'm playing around with USWDS's modal. Here's some example markup:

<button (click)="fakeButton()">babies</button>
<a [attr.href]="'danny'" class="usa-button" [attr.aria-controls]="'danny'" data-open-modal style="color: white">Open Default Modal</a>
<div class="usa-modal" [attr.id]="'danny'" data-force-action>
    <div class="usa-modal__content">
        <div class="usa-modal__main">
            <h2 class="usa-modal__heading">
                A header
            </h2>
            <div class="usa-prose">
                <p>
                    There will be content here
                </p>
            </div>
            <div class="usa-modal__footer">
                <ul class="usa-button-group">
                    <li class="usa-button-group__item">
                        <button type="button" class="usa-button" data-close-modal>
                            Confirm
                        </button>
                    </li>
                    <li class="usa-button-group__item">
                        <button (click)="danClick()" type="button" class="usa-button">
                            Confirm
                        </button>
                    </li>
                    <li class="usa-button-group__item">
                        <button type="button" class="usa-button usa-button--unstyled padding-105 text-center" data-close-modal>
                            Cancel
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Here's the Angular component code:

import modal from 'uswds/src/js/components/modal';
[...]
fakeButton(): void {
    modal.on();
}

If I do it that way, we get this result, everything works:

But now let's add this:

<div id="dan-wrap">
<!-- modal stuff in here -->
</div>

And our function will do this instead:

fakeButton(): void {
    modal.on(document.getElementById('dan-wrap'));
}

In this case, where I pass markup to the on function, the modal will open, but the buttons in the modal no longer do anything.

Or instead of using the "dan-wrap" div, do this:

constructor(public myself: ElementRef) {
}

fakeButton(): void {
    modal.on(this.myself.nativeElement);
}

This will give the same failing result.

USWDS version 2.14.0.

Answered by dajones537

Jul 28, 2023

Thanks for the feedback. Since posting this I've refactored my modal service to not use uswds's modal functionality. That said, I would be curious to see what happens under new uswds version, so I'll return to this and experiment later. EDIT: won't bother experimenting since I've moved away from doing this in the first place

View full answer

jbouder · 2023-07-18T21:46:07Z

jbouder
Jul 18, 2023

Again, not an Angular guy, but I’ve also had quite a few issues with the USWDS modals. I’d suggest first taking a look at the following Angular USWDS Implementation as it has a modal: https://github.com/GSA/ngx-uswds.

If that doesn’t help, review the other implementations here: https://designsystem.digital.gov/documentation/implementations/.

And if that doesn’t work, maybe take a look at our React implementation here for some inspiration: https://github.com/MetroStar/comet/tree/main/packages/comet-uswds/src/components/modal.

Best of luck!

1 reply

dajones537 Jul 20, 2023
Author

Thanks. Turns out a co-worker is experimenting with Angular Materials' modals. If we can style those to match USWDS styles, then that may be the best route. In the meantime I've been coming up with some whacky experiments to workaround this. In a nutshell: I have a ModalService, which begins by wiping the slate clean and destroying any already-created modals. Then it calls modal.on(), which is now safe to do since we've reset back to zero. I don't really like doing this, so will probably end up going with Angular Mat, but we'll see.

mejiaj · 2023-07-27T20:46:45Z

mejiaj
Jul 27, 2023

@dajones537 There was some work done when USWDS 3 was released. Are you seeing the same issues with the current version 3.5.0?

8 replies

jbouder Jul 27, 2023

The main issue I’ve had when using in React (including 3.5) is adding event listeners (like onClick) to buttons within the modal. The events never fire. So to get around this I had to do some React trickery to add/remove the listeners on the fly and explicitly calling the modal toggleModal functions. Here is an example illustrating the point: https://github.com/MetroStar/comet/blob/main/packages/comet-uswds/src/components/modal/modal.stories.tsx

Any thoughts on the issue? And if maybe there might be a better way to handle it within a React context?

mejiaj Jul 28, 2023

Oh that's interesting. There used to be a event.stopPropagation in Modal that seemed to be the cause of this. I think it was related to an old Safari bug.

https://github.com/uswds/uswds/pull/5049/files#diff-c7fd10b2638da39aa2cdf0583b9f14f1b05d5451909df6bbcd5ec528d74102afL109

CC @mahoneycm because he recently did some work on USA Modal.

Unfortunately, I don't have an immediate way to improve this in a react context. These cases help us understand the problems teams are facing. We want to improve this experience, but we want to do it in a way that works in all environments.

dajones537 Jul 28, 2023
Author

Thanks for the feedback. Since posting this I've refactored my modal service to not use uswds's modal functionality. That said, I would be curious to see what happens under new uswds version, so I'll return to this and experiment later. EDIT: won't bother experimenting since I've moved away from doing this in the first place

Answer selected by dajones537

jbouder Jul 29, 2023

@mejiaj , looks like that change by @mahoneycm is actually allowing my current workaround to work where I can manually call the toggleModel function (without the data-close-modal attribute). So that’s a huge help :) An ideal solution for me though, would be to add the data-close-modal attribute to my button as well as an onClick function to run some code before the modal closes…which doesn’t seem to work for me. Not sure if that is a scenario you all would want to account for, but if so, I’ll definitely do some digging with the hopes of creating a PR to fix.

dajones537 · 2023-08-17T18:59:23Z

dajones537
Aug 17, 2023
Author

@dajones537 There was some work done when USWDS 3 was released. Are you seeing the same issues with the current version 3.5.0?

I decided to create my own modal service instead of using uswds' modals, so I'll close this out. Thanks.

0 replies

Trying to use USWDS modal. Works if I don't pass argument to on method, doesn't work if I do #5390

Uh oh!

Uh oh!

Replies: 3 comments · 9 replies

Uh oh!

Uh oh!

dajones537 Jul 20, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dajones537 Jul 28, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dajones537 Aug 17, 2023 Author

Replies: 3 comments 9 replies

dajones537 Jul 20, 2023
Author

dajones537 Jul 28, 2023
Author

dajones537
Aug 17, 2023
Author