Can't get close button to work on sidebar modal

Questions
,
1

Hi everyone,
I’m trying to get a button to close a sidebar modal that I have successfully opened.

The modal opens with no problems but no matter what I try, I can’t get the button to close it.

The modal code is, I’ve added two different buttons to show what I’ve tried:

import { customElement, html } from "@umbraco-cms/backoffice/external/lit";
import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
import { HeaderAppModalData, HeaderAppModalValue } from "./headerapp-modal.token";

@customElement('headerapp-element')

export class HeaderAppModal
  extends UmbModalBaseElement<HeaderAppModalData, HeaderAppModalValue>{

  constructor() {
    super();
   }

  connectedCallback() {
    super.connectedCallback();

  }
  override render() {
    return html`
    <umb-body-layout headline=${this.localize.term('user_chooseUserGroup', true)}>
				<uui-box>
        Something here
        </uui-box>
        	<div slot="actions">
					
					<uui-button
						label="OK"}
						look="primary"
						color="positive"
						@click=${this.modalContext?.reject()}></uui-button>
	<uui-button
						label="OK"}
						look="primary"
						color="positive"
						@click=${this._rejectModal}></uui-button>
				</div>
      </umb-body-layout>
        `;
  }
}

export default HeaderAppModal;

declare global {
  interface HTMLElementTagNameMap {
    'headerapp-element': HeaderAppModal;
  }
}

I’ve had a look at the Umbraco source code to see how they handle closing sidebar modals and this looks pretty similar but never works,

I open the modal via a header app :

<button @click=${this.#onClick}>BUTTON</button>

 #onClick() {
   console.log('Break button clicked');
   this._triggerModal();
   this._dispatchBreakEvent();
 }

private _triggerModal = () => {
  this.#modalManagerContext?.open(this, HEADERAPP_MODAL_TOKEN, {
    data: {
      headline: 'Relaxation time',
    }
  });
}

What am I missing?
Thanks.
O.

2

Hey Owain
Are you trying to use the button that opened the modal to toggle closing the modal?

If you want a button in the modal itself to close itself you can do something like this.

private handleClose() {
        this.modalContext?.reject({ type: "close" } as UmbModalRejectReason);
}
1 Like
3

Thanks @warren

I’m wanting a button on the modal to close it. I’ll give your solution a bash tomorrow. Appreciate you taking the time to answer :+1: :H5YR:

4

Is the repo public?
Happy to take a quick look

1 Like
5

Na. It’s private just now.

I’ll maybe make it public if I can’t get any further :joy:

1 Like
6

Gave this a go tonight and when I click the close button, with a breakpoint put on

 private handleClose() {
   this.modalContext?.reject({ type: "close" } as UmbModalRejectReason);
 }

I do hit the method but modalContext is undefined and so does nothing.

7

Hmmm interesting….
What’s the entire file and lets see what’s up

1 Like
8

@OwainWilliams In your original code snippet, I notice a curly brace after the label="OK"} attribute… I’m wondering if that’s causing an issue here?

Otherwise, either @click=${this._rejectModal} or @click=${this._submitModal} should work, (as long as your modal element is extending from UmbModalBaseElement<>).

1 Like
9

Hi both,
I’ve pushed my code up to github.

The full modal file is :

I had tried _rejectModal in the past, as I could see that worked from the Umbraco source code but I’m clearly missing something as the modal still doesn’t close. I’m extending from UmbModalBaseElement too.

10

Ok seen your codebase a little better.
I would make your life easier to begin with and use this file that is the modal to have the html you want in there. Rather than adding another HTML element inside this element. It may be causing some of the problems you might be seeing, as always good to simplify things and get it working first IMO.

1 Like
11

Simple when you rethink things :smiley:

The nested elements were obviously causing an issue and I never thought about moving the render out to the initial call. Good to know for future.

That fixed it. Thanks @warren

1 Like