Commit be9e8c53 authored by Axel García's avatar Axel García

Propagate label selector click when embedded

parent 0b0080f1
<script> <script>
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import { GlButton, GlIcon } from '@gitlab/ui'; import { GlButton, GlIcon } from '@gitlab/ui';
export default { export default {
...@@ -8,6 +8,7 @@ export default { ...@@ -8,6 +8,7 @@ export default {
GlIcon, GlIcon,
}, },
computed: { computed: {
...mapState(['showDropdownContents']),
...mapGetters([ ...mapGetters([
'dropdownButtonText', 'dropdownButtonText',
'isDropdownVariantStandalone', 'isDropdownVariantStandalone',
...@@ -19,6 +20,9 @@ export default { ...@@ -19,6 +20,9 @@ export default {
handleButtonClick(e) { handleButtonClick(e) {
if (this.isDropdownVariantStandalone || this.isDropdownVariantEmbedded) { if (this.isDropdownVariantStandalone || this.isDropdownVariantEmbedded) {
this.toggleDropdownContents(); this.toggleDropdownContents();
}
if (this.isDropdownVariantStandalone) {
e.stopPropagation(); e.stopPropagation();
} }
}, },
...@@ -31,9 +35,9 @@ export default { ...@@ -31,9 +35,9 @@ export default {
class="labels-select-dropdown-button js-dropdown-button w-100 text-left" class="labels-select-dropdown-button js-dropdown-button w-100 text-left"
@click="handleButtonClick" @click="handleButtonClick"
> >
<span class="dropdown-toggle-text flex-fill"> <span class="dropdown-toggle-text gl-pointer-events-none flex-fill">
{{ dropdownButtonText }} {{ dropdownButtonText }}
</span> </span>
<gl-icon name="chevron-down" class="float-right" /> <gl-icon name="chevron-down" class="gl-pointer-events-none float-right" />
</gl-button> </gl-button>
</template> </template>
...@@ -45,7 +45,7 @@ describe('DropdownButton', () => { ...@@ -45,7 +45,7 @@ describe('DropdownButton', () => {
${'standalone'} ${'standalone'}
${'embedded'} ${'embedded'}
`( `(
'toggles dropdown content and stops event propagation when `state.variant` is "$variant"', 'toggles dropdown content and handles event propagation when `state.variant` is "$variant"',
({ variant }) => { ({ variant }) => {
const event = { stopPropagation: jest.fn() }; const event = { stopPropagation: jest.fn() };
...@@ -57,7 +57,12 @@ describe('DropdownButton', () => { ...@@ -57,7 +57,12 @@ describe('DropdownButton', () => {
findDropdownButton().vm.$emit('click', event); findDropdownButton().vm.$emit('click', event);
expect(store.state.showDropdownContents).toBe(true); expect(store.state.showDropdownContents).toBe(true);
if (variant === 'standalone') {
expect(event.stopPropagation).toHaveBeenCalled(); expect(event.stopPropagation).toHaveBeenCalled();
} else {
expect(event.stopPropagation).not.toHaveBeenCalled();
}
}, },
); );
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment