Dialog:Close Behavior Hide Popover

Build 1128 on react-18-support
1200px
Reviewing disabled
View latest build
ErrorBuild 1128 on react-18-support
View Storybook
ErrorBuild 1128 on react-18-support
View Storybook
  • Discussions
  • Interactions
Fail
Dialog.stories.tsx
Unable to find role="dialog"

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="sc-ifyrAs bxYbUy root"
    data-font-display="auto"
    id="cube-ui-kit-root"
    style="--cube-dynamic-viewport-height:900px;"
  >
    <button
      class="sc-eDLKkx jhFjPS"
      data-is-hovered=""
      data-qa="Button"
      data-size="medium"
      data-theme="default"
      data-type="secondary"
      type="button"
    >
      Click me!
    </button>
    <div
      aria-live="polite"
      class="sc-irLvIq ScExs"
      data-qa="NotificationsBar"
      role="region"
      tabindex="0"
    />
    <div
      class="sc-dmXWDj hqqULc"
      data-is-exited=""
      data-ismodal="true"
      data-placement="bottom"
      data-qa="Popover"
      role="presentation"
      style="position: absolute; z-index: 100000;"
    >
      <div
        data-focus-guard="true"
        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
        tabindex="-1"
      />
      <div
        class="sc-fHejqy cNMbGF"
        data-focus-lock-disabled="disabled"
      >
        <section
          aria-labelledby="react-aria4243019322-:r3:"
          class="sc-fmKFGs iEIxYV"
          data-id="Dialog"
          data-qa="Dialog"
          data-size="small"
          data-type="popover"
          id="react-aria4243019322-:r0:"
          role="dialog"
          style="--dialog-size:360px;"
          tabindex="-1"
        >
          <div
            style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
          >
            <button
              aria-label="Dismiss"
              id="react-aria4243019322-:r4:"
              style="width: 1px; height: 1px;"
              tabindex="-1"
            />
          </div>
          <header
            class="sc-eTNRI kOhTCv"
            data-qa="Header"
          >
            <h1
              class="sc-dmyCSP cCQZlf"
              data-level="1"
              data-qa="Title"
              id="react-aria4243019322-:r3:"
            >
              Modal title
            </h1>
            <span
              class="sc-guDLey iyRwlj"
              data-qa="Text"
            >
              Header
            </span>
          </header>
          <section
            class="sc-csKJxZ bpTIRB"
            data-qa="Content"
          >
            <p
              class="sc-guDLey glxbvP"
              data-qa="Paragraph"
            >
              Test content
            </p>
            <p
              class="sc-guDLey glxbvP"
              data-qa="Paragraph"
            >
              Test content
            </p>
          </section>
          <div
            class="sc-blmEgr eVeAnU"
            data-id="Footer"
            data-qa="Footer"
          >
            <div
              class="sc-hLQSwg jJQAiL"
              data-qa="ButtonGroup"
            >
              <button
                class="sc-eDLKkx jhFjPS"
                data-qa="Button"
                data-size="medium"
                data-theme="default"
                data-type="primary"
                type="button"
              >
                Action
              </button>
              <button
                class="sc-eDLKkx jhFjPS"
                data-qa="Button"
                data-size="medium"
                data-theme="default"
                data-type="secondary"
                type="button"
              >
                Sec
              </button>
              <button
                class="sc-eDLKkx jhFjPS"
                data-qa="Button"
                data-size="medium"
                data-theme="default"
                data-type="secondary"
                type="button"
              >
                Cancel
              </button>
            </div>
            <span
              class="sc-guDLey iyRwlj"
              data-qa="Text"
            >
              Footer
            </span>
          </div>
        </section>
      </div>
      <div
        data-focus-guard="true"
        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
        tabindex="-1"
      />
    </div>
  </div>
</div>
View in Storybook
Chrome 105
648x470
Linux Linux Ubuntu 20.04.4
26a204 on react-18-support
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: Unable to find role="dialog"

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="sc-ifyrAs bxYbUy root"
    data-font-display="auto"
    id="cube-ui-kit-root"
    style="--cube-dynamic-viewport-height:900px;"
  >
    <button
      class="sc-eDLKkx jhFjPS"
      data-is-hovered=""
      data-qa="Button"
      data-size="medium"
      data-theme="default"
      data-type="secondary"
      type="button"
    >
      Click me!
    </button>
    <div
      aria-live="polite"
      class="sc-irLvIq ScExs"
      data-qa="NotificationsBar"
      role="region"
      tabindex="0"
    />
    <div
      class="sc-dmXWDj hqqULc"
      data-is-exited=""
      data-ismodal="true"
      data-placement="bottom"
      data-qa="Popover"
      role="presentation"
      style="position: absolute; z-index: 100000;"
    >
      <div
        data-focus-guard="true"
        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
        tabindex="-1"
      />
      <div
        class="sc-fHejqy cNMbGF"
        data-focus-lock-disabled="disabled"
      >
        <section
          aria-labelledby="react-aria4243019322-:r3:"
          class="sc-fmKFGs iEIxYV"
          data-id="Dialog"
          data-qa="Dialog"
          data-size="small"
          data-type="popover"
          id="react-aria4243019322-:r0:"
          role="dialog"
          style="--dialog-size:360px;"
          tabindex="-1"
        >
          <div
            style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
          >
            <button
              aria-label="Dismiss"
              id="react-aria4243019322-:r4:"
              style="width: 1px; height: 1px;"
              tabindex="-1"
            />
          </div>
          <header
            class="sc-eTNRI kOhTCv"
            data-qa="Header"
          >
            <h1
              class="sc-dmyCSP cCQZlf"
              data-level="1"
              data-qa="Title"
              id="react-aria4243019322-:r3:"
            >
              Modal title
            </h1>
            <span
              class="sc-guDLey iyRwlj"
              data-qa="Text"
            >
              Header
            </span>
          </header>
          <section
            class="sc-csKJxZ bpTIRB"
            data-qa="Content"
          >
            <p
              class="sc-guDLey glxbvP"
              data-qa="Paragraph"
            >
              Test content
            </p>
            <p
              class="sc-guDLey glxbvP"
              data-qa="Paragraph"
            >
              Test content
            </p>
          </section>
          <div
            class="sc-blmEgr eVeAnU"
            data-id="Footer"
            data-qa="Footer"
          >
            <div
              class="sc-hLQSwg jJQAiL"
              data-qa="ButtonGroup"
            >
              <button
                class="sc-eDLKkx jhFjPS"
                data-qa="Button"
                data-size="medium"
                data-theme="default"
                data-type="primary"
                type="button"
              >
                Action
              </button>
              <button
                class="sc-eDLKkx jhFjPS"
                data-qa="Button"
                data-size="medium"
                data-theme="default"
                data-type="secondary"
                type="button"
              >
                Sec
              </button>
              <button
                class="sc-eDLKkx jhFjPS"
                data-qa="Button"
                data-size="medium"
                data-theme="default"
                data-type="secondary"
                type="button"
              >
                Cancel
              </button>
            </div>
            <span
              class="sc-guDLey iyRwlj"
              data-qa="Text"
            >
              Footer
            </span>
          </div>
        </section>
      </div>
      <div
        data-focus-guard="true"
        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
        tabindex="-1"
      />
    </div>
  </div>
</div>
    at Object.Wa [as waitFor] (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:157:3360)
    at Ap.invoke (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:9139)
    at Ap.intercept (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:6668)
    at Ap.track (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:6400)
    at waitFor (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:5672)
    at l.play (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/Dialog.stories-C81LzYgB.js:1:2667)
    at async https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3588
    at async StoryRender.runPhase (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912)
    at async StoryRender.render (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3536)