vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #150 - Dropdown and MultiSelect on expand event

pull/201/head
cagataycivici 2020-01-30 10:09:09 +03:00
parent 8e878257ce
commit 7c4c751daf
6 changed files with 62 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dropdown/Dropdown.d.ts vendored
View File

@ -19,6 +19,8 @@ export declare class Dropdown extends Vue {
appendTo?: string;
$emit(eventName: 'input', value: string): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$slot: {
option: VNode[];
}

26
src/components/dropdown/Dropdown.vue
View File

@ -123,6 +123,14 @@ export default {
return selectedOptionIndex;
},
show() {
this.overlayVisible = true;
this.$emit('show');
},
hide() {
this.overlayVisible = false;
this.$emit('hide');
},
onFocus() {
this.focused = true;
},
@ -144,7 +152,7 @@ export default {
//space
case 32:
if (!this.overlayVisible) {
this.overlayVisible = true;
this.show();
event.preventDefault();
}
break;
@ -153,14 +161,14 @@ export default {
case 13:
case 27:
if (this.overlayVisible) {
this.overlayVisible = false;
this.hide();
event.preventDefault();
}
break;
//tab
case 9:
this.overlayVisible = false;
this.hide();
break;
default:
@ -194,7 +202,7 @@ export default {
onDownKey(event) {
if (this.visibleOptions) {
if (!this.overlayVisible && event.altKey) {
this.overlayVisible = true;
this.show();
}
else {
let nextOption = this.findNextOption(this.getSelectedOptionIndex());
@ -255,7 +263,11 @@ export default {
return;
}
else if (!this.$refs.overlay || !this.$refs.overlay.contains(event.target)) {
this.overlayVisible = !this.overlayVisible;
if (this.overlayVisible)
this.hide();
else
this.show();
this.$refs.focusInput.focus();
}
},
@ -265,7 +277,7 @@ export default {
this.$refs.focusInput.focus();
setTimeout(() => {
this.overlayVisible = false;
this.hide();
}, 100);
},
onEditableInput(event) {
@ -299,7 +311,7 @@ export default {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.$refs.overlay && !this.$refs.container.contains(event.target)) {
this.overlayVisible = false;
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);

2
src/components/multiselect/MultiSelect.d.ts vendored
View File

@ -16,6 +16,8 @@ export declare class MultiSelect extends Vue {
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$slots: {
value: VNode[];
option: VNode[];

26
src/components/multiselect/MultiSelect.vue
View File

@ -118,6 +118,14 @@ export default {
return selected;
},
show() {
this.overlayVisible = true;
this.$emit('show');
},
hide() {
this.overlayVisible = false;
this.$emit('hide');
},
onFocus() {
this.focused = true;
},
@ -132,26 +140,30 @@ export default {
},
onClick() {
if (!this.disabled && (!this.$refs.overlay || !this.$refs.overlay.contains(event.target))) {
this.overlayVisible = !this.overlayVisible;
if (this.overlayVisible)
this.hide();
else
this.show();
this.$refs.focusInput.focus();
}
},
onCloseClick() {
this.overlayVisible = false;
this.hide();
},
onKeyDown(event) {
switch(event.which) {
//down
case 40:
if (this.visibleOptions && !this.overlayVisible && event.altKey) {
this.overlayVisible = true;
this.show();
}
break;
//space
case 32:
if (!this.overlayVisible) {
this.overlayVisible = true;
this.show();
event.preventDefault();
}
break;
@ -160,14 +172,14 @@ export default {
case 13:
case 27:
if (this.overlayVisible) {
this.overlayVisible = false;
this.hide();
event.preventDefault();
}
break;
//tab
case 9:
this.overlayVisible = false;
this.hide();
break;
default:
@ -254,7 +266,7 @@ export default {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.isOutsideClicked(event)) {
this.overlayVisible = false;
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);

10
src/views/dropdown/DropdownDoc.vue
View File

@ -187,6 +187,16 @@ data() {
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when the dropdown overlay is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when the dropdown overlay is hidden.</td>
</tr>
</tbody>
</table>

10
src/views/multiselect/MultiSelectDoc.vue
View File

@ -180,6 +180,16 @@ data() {
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when the dropdown overlay is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when the dropdown overlay is hidden.</td>
</tr>
</tbody>
</table>
</div>