refactor: ♻️ added disableBackspaceRemove (#28)

Author: harshzalavadiya

README.md

@@ -55,20 +55,21 @@ export default Example;
 
 ## 👀 Props
 
-| Prop                | Description                                                                     | Type                                               | Default     |
-| ------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------- | ----------- |
-| `name`              | value for name of input                                                         | `string`                                           |             |
-| `placeholder`       | placeholder for text input                                                      | `string`                                           |             |
-| `value`             | initial tags                                                                    | `string[]`                                         | `[]`        |
-| `onChange`          | onChange callback (added/removed)                                               | `string[]`                                         |             |
-| `classNames`        | className for styling input and tags (i.e {tag:'tag-cls', input: 'input-cls'})  | `object[tag, input]`                               |             |
-| `onKeyUp`           | input `onKeyUp` callback                                                        | `event`                                            |             |
-| `onBlur`            | input `onBlur` callback                                                         | `event`                                            |             |
-| `seprators`         | when to add tag (i.e. `Space`,`Enter`)                                          | `string[]`                                         | `["Enter"]` |
-| `onExisting`        | if tag is already added then callback                                           | `(tag: string) => void`                            |             |
-| `onRemoved`         | on tag removed callback                                                         | `(tag: string) => void`                            |             |
-| `beforeAddValidate` | Custom validation before adding tag                                             | `(tag: string, existingTags: string[]) => boolean` |             |
-| `isEditOnRemove`    | Remove the tag but keep the word in the input to edit it on using Backscape Key | `boolean`                                          | `false`     |
+| Prop                | Description                                                                     | Type                                               | Default         |
+| ------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------- | --------------- |
+| `name`              | value for name of input                                                         | `string`                                           |                 |
+| `placeholder`       | placeholder for text input                                                      | `string`                                           |                 |
+| `value`             | initial tags                                                                    | `string[]`                                         | `[]`            |
+| `onChange`          | onChange callback (added/removed)                                               | `string[]`                                         |                 |
+| `classNames`        | className for styling input and tags (i.e {tag:'tag-cls', input: 'input-cls'})  | `object[tag, input]`                               |                 |
+| `onKeyUp`           | input `onKeyUp` callback                                                        | `event`                                            |                 |
+| `onBlur`            | input `onBlur` callback                                                         | `event`                                            |                 |
+| `seprators`         | when to add tag (i.e. `Space`,`Enter`)                                          | `string[]`                                         | `["Enter"]`     |
+| `removers`          | Remove last tag if textbox empty and `Backspace` is pressed                     | `string[]`                                         | `["Backspace"]` |
+| `onExisting`        | if tag is already added then callback                                           | `(tag: string) => void`                            |                 |
+| `onRemoved`         | on tag removed callback                                                         | `(tag: string) => void`                            |                 |
+| `beforeAddValidate` | Custom validation before adding tag                                             | `(tag: string, existingTags: string[]) => boolean` |                 |
+| `isEditOnRemove`    | Remove the tag but keep the word in the input to edit it on using Backscape Key | `boolean`                                          | `false`         |
 
 ## 💅 Themeing
 

src/index.tsx

@@ -11,6 +11,7 @@ export interface TagsInputProps {
   onChange?: (tags: string[]) => void;
   onBlur?: any;
   seprators?: string[];
+  disableBackspaceRemove?: boolean;
   onExisting?: (tag: string) => void;
   onRemoved?: (tag: string) => void;
   disabled?: boolean;
@@ -74,6 +75,7 @@ export const TagsInput = ({
   onChange,
   onBlur,
   seprators,
+  disableBackspaceRemove,
   onExisting,
   onRemoved,
   disabled,
@@ -90,16 +92,21 @@ export const TagsInput = ({
 
   useEffect(() => {
     if (JSON.stringify(value) !== JSON.stringify(tags)) {
-      setTags(value)
+      setTags(value);
     }
-  }, [value])
+  }, [value]);
 
   const handleOnKeyUp = e => {
     e.stopPropagation();
 
     const text = e.target.value;
 
-    if (e.key === "Backspace" && tags.length && !text) {
+    if (
+      !text &&
+      !disableBackspaceRemove &&
+      tags.length &&
+      e.key === "Backspace"
+    ) {
       e.target.value = isEditOnRemove ? `${tags.at(-1)} ` : "";
       setTags([...tags.slice(0, -1)]);
     }
@@ -125,7 +132,13 @@ export const TagsInput = ({
   return (
     <div aria-labelledby={name} className={cc("rti--container", RTIContainer)}>
       {tags.map(tag => (
-        <Tag key={tag} className={classNames?.tag} text={tag} remove={onTagRemove} disabled={disabled} />
+        <Tag
+          key={tag}
+          className={classNames?.tag}
+          text={tag}
+          remove={onTagRemove}
+          disabled={disabled}
+        />
       ))}
 
       <input

stories/tags-input.stories.tsx

@@ -29,6 +29,7 @@ export const Page = () => {
         name="fruits"
         placeHolder="enter fruits"
         disabled={disabled}
+        disableBackspaceRemove={true}
         isEditOnRemove={isEditOnRemove}
         beforeAddValidate={beforeAddValidate}
       />