Skip to content

Commit

Permalink
#5675 PickList metakey selection support for arrow keys
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Jan 10, 2024
1 parent f993a21 commit 77baff7
Showing 1 changed file with 13 additions and 12 deletions.
25 changes: 13 additions & 12 deletions components/lib/picklist/PickList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export const PickList = React.memo(
props.onBlur && props.onBlur(event);
};

const onItemClick = (event, type) => {
const onItemClick = (event, type, arrowKeyClick = false) => {
let originalEvent = event.originalEvent;
let item = event.value;
let selectedId = event.id;
Expand All @@ -258,10 +258,10 @@ export const PickList = React.memo(
let selected = index !== -1;
let metaSelection = props.metaKeySelection;

setFocusedOptionIndex(selectedId);
if (!arrowKeyClick) setFocusedOptionIndex(selectedId);

if (metaSelection) {
const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
const metaKey = originalEvent.metaKey || originalEvent.ctrlKey || originalEvent.shiftKey;

if (selected && metaKey) {
selection.splice(index, 1);
Expand Down Expand Up @@ -334,31 +334,33 @@ export const PickList = React.memo(

const onArrowDownKey = (event, type) => {
const optionIndex = findNextOptionIndex(focusedOptionIndex, type);
const visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);

changeFocusedOptionIndex(optionIndex, type);

if (event.shiftKey) {
onEnterKey(event, type);
if (visibleList && visibleList.length > 0 && event.shiftKey) {
onItemClick({ originalEvent: event, value: visibleList[optionIndex] }, type, true);
}

event.preventDefault();
};

const onArrowUpKey = (event, type) => {
const optionIndex = findPrevOptionIndex(focusedOptionIndex, type);
const visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);

changeFocusedOptionIndex(optionIndex, type);

if (event.shiftKey) {
onEnterKey(event, type);
if (visibleList && visibleList.length > 0 && event.shiftKey) {
onItemClick({ originalEvent: event, value: visibleList[optionIndex] }, type, true);
}

event.preventDefault();
};

const onEnterKey = (event, type) => {
const listElement = getListElement(type);
const visibleList = type === 'source' ? props.source : props.target;
const visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
const items = DomHandler.find(listElement, '[data-pc-section="item"]');
const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
const id = focusedItem && focusedItem.getAttribute('id');
Expand Down Expand Up @@ -399,14 +401,13 @@ export const PickList = React.memo(

const onHomeKey = (event, type) => {
if (event.ctrlKey && event.shiftKey) {
const isSource = type === 'sourceList';
const isSource = type === 'source';
const listItems = isSource ? sourceList : targetList;
const listElement = getListElement(type);
const items = DomHandler.find(listElement, '[data-pc-section="item"]');
const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);

selection = [...listItems].slice(0, matchedOptionIndex + 1);
const selection = [...listItems].slice(0, matchedOptionIndex + 1);

if (isSource) {
onSelectionChange({ originalEvent: event, value: selection }, 'sourceSelection', props.onSourceSelectionChange);
Expand All @@ -425,7 +426,7 @@ export const PickList = React.memo(
const items = DomHandler.find(listElement, '[data-pc-section="item"]');

if (event.ctrlKey && event.shiftKey) {
const isSource = type === 'sourceList';
const isSource = type === 'source';
const listItems = isSource ? sourceList : targetList;
const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
Expand Down

0 comments on commit 77baff7

Please sign in to comment.