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; appendTo?: string;
$emit(eventName: 'input', value: string): this; $emit(eventName: 'input', value: string): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: string }): this; $emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$slot: { $slot: {
option: VNode[]; option: VNode[];
} }

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

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

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

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

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

@ -187,6 +187,16 @@ data() {
<td>input</td> <td>input</td>
<td>value: New value</td> <td>value: New value</td>
<td>Callback to invoke on value change.</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> </tr>
</tbody> </tbody>
</table> </table>

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

@ -180,6 +180,16 @@ data() {
<td>value: New value</td> <td>value: New value</td>
<td>Callback to invoke on value change.</td> <td>Callback to invoke on value change.</td>
</tr> </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> </tbody>
</table> </table>
</div> </div>