Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add an option to introduce friction when using the delete key #5669

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add an option to introduce friction when using the delete key #5669

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/react-select/src/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ export interface Props<
autoFocus?: boolean;
/** Remove the currently focused option when the user presses backspace when Select isClearable or isMulti */
backspaceRemovesValue: boolean;
/** Only removes a value if it has been focused, if backspace is clicked when the value is not focused it will focus it. This is only for Select or isMulti */
backspaceFriction: boolean;
/** Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices) */
blurInputOnSelect: boolean;
/** When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent */
Expand Down Expand Up @@ -280,6 +282,7 @@ export interface Props<
export const defaultProps = {
'aria-live': 'polite',
backspaceRemovesValue: true,
backspaceFriction: false,
blurInputOnSelect: isTouchCapable(),
captureMenuScroll: !isTouchCapable(),
classNames: {},
Expand Down Expand Up @@ -1460,6 +1463,7 @@ export default class Select<
const {
isMulti,
backspaceRemovesValue,
backspaceFriction,
escapeClearsValue,
inputValue,
isClearable,
Expand Down Expand Up @@ -1494,6 +1498,15 @@ export default class Select<
case 'Delete':
case 'Backspace':
if (inputValue) return;
if (backspaceFriction) {
if (focusedValue) {
this.removeValue(focusedValue);
return;
} else {
this.focusValue('previous');
return;
}
}
Comment on lines +1501 to +1509
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (backspaceFriction) {
if (focusedValue) {
this.removeValue(focusedValue);
return;
} else {
this.focusValue('previous');
return;
}
}
if (backspaceFriction && !focusedValue) {
this.focusValue('previous');
return;
}

if (focusedValue) {
this.removeValue(focusedValue);
} else {
Expand Down