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

Fixed #5106 - Change visual focus behavior for UI/UX enhancement on some components

pull/5110/head
mertsincan 2024-01-18 13:44:20 +00:00
parent 55c68a010b
commit bed58e4f80
5 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/lib/cascadeselect/CascadeSelect.vue
View File

@ -153,13 +153,13 @@ export default {
isOptionGroup(option, level) {
return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
},
getProccessedOptionLabel(processedOption) {
getProccessedOptionLabel(processedOption = {}) {
const grouped = this.isProccessedOptionGroup(processedOption);
return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
},
isProccessedOptionGroup(processedOption) {
return ObjectUtils.isNotEmpty(processedOption.children);
return ObjectUtils.isNotEmpty(processedOption?.children);
},
show(isFocus) {
this.$emit('before-show');
@ -285,14 +285,14 @@ export default {
activeOptionPath.push(processedOption);
this.focusedOptionInfo = { index, level, parentKey };
this.focusedOptionInfo = originalEvent?.type === 'click' ? { index: -1, level, parentKey } : { index, level, parentKey };
this.activeOptionPath = activeOptionPath;
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
isFocus && DomHandler.focus(this.$refs.focusInput);
},
onOptionSelect(event, processedOption, isHide = true) {
const value = this.getOptionValue(processedOption.option);
const value = this.getOptionValue(processedOption?.option);
this.activeOptionPath.forEach((p) => (p.selected = true));
this.updateModel(event, value);
@ -361,9 +361,9 @@ export default {
onArrowLeftKey(event) {
if (this.overlayVisible) {
const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
const parentOption = this.activeOptionPath.find((p) => p.key === processedOption.parentKey);
const parentOption = this.activeOptionPath.find((p) => p.key === processedOption?.parentKey);
const matched = this.focusedOptionInfo.parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo.parentKey);
const root = ObjectUtils.isEmpty(processedOption.parent);
const root = ObjectUtils.isEmpty(processedOption?.parent);
if (matched) {
this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
@ -384,10 +384,10 @@ export default {
const grouped = this.isProccessedOptionGroup(processedOption);
if (grouped) {
const matched = this.activeOptionPath.some((p) => processedOption.key === p.key);
const matched = this.activeOptionPath.some((p) => processedOption?.key === p.key);
if (matched) {
this.focusedOptionInfo = { index: -1, parentKey: processedOption.key };
this.focusedOptionInfo = { index: -1, parentKey: processedOption?.key };
this.searchValue = '';
this.onArrowDownKey(event);
} else {

2
components/lib/listbox/Listbox.vue
View File

@ -306,7 +306,7 @@ export default {
this.multiple ? this.onOptionSelectMultiple(event, option) : this.onOptionSelectSingle(event, option);
this.optionTouched = false;
index !== -1 && (this.focusedOptionIndex = index);
index !== -1 && (this.focusedOptionIndex = event?.type === 'click' ? -1 : index);
},
onOptionMouseDown(event, index) {
this.changeFocusedOptionIndex(event, index);

2
components/lib/multiselect/MultiSelect.vue
View File

@ -454,7 +454,7 @@ export default {
else value = [...(this.modelValue || []), this.getOptionValue(option)];
this.updateModel(event, value);
index !== -1 && (this.focusedOptionIndex = index);
index !== -1 && (this.focusedOptionIndex = event?.type === 'click' ? -1 : index);
isFocus && DomHandler.focus(this.$refs.focusInput);
},
onOptionMouseMove(event, index) {

2
components/lib/orderlist/OrderList.vue
View File

@ -431,7 +431,7 @@ export default {
const selectedId = DomHandler.find(this.list, '[data-pc-section="item"]')[index].getAttribute('id');
this.focusedOptionIndex = selectedId;
this.focusedOptionIndex = event?.type === 'click' ? -1 : selectedId;
if (metaSelection) {
const metaKey = event.metaKey || event.ctrlKey;

2
components/lib/picklist/PickList.vue
View File

@ -586,7 +586,7 @@ export default {
const metaSelection = this.itemTouched ? false : this.metaKeySelection;
const selectedId = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]')[index].getAttribute('id');
this.focusedOptionIndex = selectedId;
this.focusedOptionIndex = event?.type === 'click' ? -1 : selectedId;
let _selection;
if (metaSelection) {