KDropdownMenu in KModal: Dropdown menu does not display in KModal

[LianaHarris360]

Product

Design System

Expected behavior

When KButton and KDropdownMenu is used within KModal, clicking on the button should display the dropdown menu.

Actual behavior

When KModal contains KDropdownMenu within KButton, the dropdown menu is not shown when clicking on the button.

Steps to reproduce the issue

1. Run the KDS documentation development server.
2. Temporarily update docs/pages/kmodal.vue with the code:

<template>

  <DocsPageTemplate apiDocs>
    <DocsPageSection title="Overview" anchor="#overview">
      For design guidance, see the page on <DocsInternalLink href="/modals" text="modals" />.
      <KButton text="open kmodal" :primary="true" appearance="raised-button" @click="modalShown = true" />
      <KModal
        v-if="modalShown"
        title="Test KDropdownMenu in KModal"
        submitText="close"
        @submit="modalShown = false"
      >
        <div>
          <KButton
            hasDropdown
            text="Options"
            :primary="false"
          >
            <KDropdownMenu
              style="margin-right: 16px;"
              text="Primary"
              :primary="false"
              :options="['Option 1', 'Option 2']"
              appearance="raised-button"
              position="left bottom"
            />
          </KButton>
        </div>
      </KModal>
    </DocsPageSection>
  </DocsPageTemplate>

</template>


<script>

  import KButton from '../../lib/buttons-and-links/KButton';
  import KDropdownMenu from '../../lib/KDropdownMenu';

  export default {
    components: {
      KButton,
      KDropdownMenu,
    },
    data() {
      return {
        modalShown: false,
      };
    },
  };

</script>


<style lang="scss" scoped></style>

3. Navigate to KModal documentation page to test usage of KButton and KDropdownMenu

Additional information

It could potentially be a z-index issue. If you look closely, when the button is clicked, a slight shadow appears behind the KModal component that could be the dropdown menu.

KDropdownMenu.mov

[KshitijThareja]

Hi @MisRob.
I'd like to work on this issue. Can you please assign it to me? I'll set it up today and will give you an update on this in a day or two.

[MisRob]

Hi @KshitijThareja, yes, thank you for volunteering!

[KshitijThareja]

@LianaHarris360 @MisRob
Changing the z-index value to 99 in the lib/KDropownMenu.vue did fix the issue. I just wanted to confirm if you're fine with this change or if there's anything you'd like to add to this before I make the PR.

Here's the screenshot after making the changes: