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

Propagate label selector click when embedded

parent 0b0080f1
<script>
import { mapActions, mapGetters } from 'vuex';
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlButton, GlIcon } from '@gitlab/ui';
export default {
......@@ -8,6 +8,7 @@ export default {
GlIcon,
},
computed: {
...mapState(['showDropdownContents']),
...mapGetters([
'dropdownButtonText',
'isDropdownVariantStandalone',
......@@ -19,6 +20,9 @@ export default {
handleButtonClick(e) {
if (this.isDropdownVariantStandalone || this.isDropdownVariantEmbedded) {
this.toggleDropdownContents();
}
if (this.isDropdownVariantStandalone) {
e.stopPropagation();
}
},
......@@ -31,9 +35,9 @@ export default {
class="labels-select-dropdown-button js-dropdown-button w-100 text-left"
@click="handleButtonClick"
>
<span class="dropdown-toggle-text flex-fill">
<span class="dropdown-toggle-text gl-pointer-events-none flex-fill">
{{ dropdownButtonText }}
</span>
<gl-icon name="chevron-down" class="float-right" />
<gl-icon name="chevron-down" class="gl-pointer-events-none float-right" />
</gl-button>
</template>
......@@ -45,7 +45,7 @@ describe('DropdownButton', () => {
${'standalone'}
${'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 }) => {
const event = { stopPropagation: jest.fn() };
......@@ -57,7 +57,12 @@ describe('DropdownButton', () => {
findDropdownButton().vm.$emit('click', event);
expect(store.state.showDropdownContents).toBe(true);
if (variant === 'standalone') {
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