Feat edit on remove (#16)

* [Improvement] - Keep the word when use backspace (#11)

* Enlarge the TODO comment

* refactoring follow comments and add keep words when use backspace optional

Co-authored-by: Julmer Olivero <julmer.olivero@meru.com>
Co-authored-by: Harsh Zalavadiya <harshzalavadiya@users.noreply.github.com>

* refactor: ♻️ `keepWordsOnBackspace` to `isEditOnRemove`

Co-authored-by: Julmer Olivero Ocando <jolivero.03@gmail.com>
Co-authored-by: Julmer Olivero <julmer.olivero@meru.com>

Author: 3 people

README.md

@@ -55,17 +55,18 @@ 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[]`                                         |             |
-| `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` |             |
+| 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[]`                                         |             |
+| `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`     |
 
 ## 💅 Themeing
 

src/index.tsx

@@ -14,6 +14,7 @@ export interface TagsInputProps {
   onExisting?: (tag: string) => void;
   onRemoved?: (tag: string) => void;
   disabled?: boolean;
+  isEditOnRemove?: boolean;
   beforeAddValidate?: (tag: string, existingTags: string[]) => boolean;
 }
 
@@ -71,9 +72,10 @@ export const TagsInput = ({
   onExisting,
   onRemoved,
   disabled,
+  isEditOnRemove,
   beforeAddValidate,
 }: TagsInputProps) => {
-  const [tags, setTags] = useState(value || []);
+  const [tags, setTags] = useState<any>(value || []);
 
   useEffect(() => {
     onChange && onChange(tags);
@@ -85,7 +87,8 @@ export const TagsInput = ({
     const text = e.target.value;
 
     if (e.key === "Backspace" && tags.length && !text) {
-      setTags(tags.slice(0, -1));
+      e.target.value = isEditOnRemove ? `${tags.at(-1)} ` : "";
+      setTags([...tags.slice(0, -1)]);
     }
 
     if (text && (seprators || defaultSeprators).includes(e.key)) {

stories/tags-input.stories.tsx

@@ -9,17 +9,18 @@ export default {
 export const Page = () => {
   const [selected, setSelected] = useState(["papaya"]);
   const [disabled, setDisabled] = useState(false);
+  const [isEditOnRemove, setisEditOnRemove] = useState(false);
 
-  const beforeAddValidate = (text) => {
-    if(text.length < 3) {
-      alert("too short!")
+  const beforeAddValidate = text => {
+    if (text.length < 3) {
+      alert("too short!");
       return false;
     }
     return true;
-  }
+  };
 
   return (
-    <div>
+    <div style={{ marginBottom: "32px" }}>
       <h1>Add Fruits</h1>
       <pre>{JSON.stringify(selected)}</pre>
       <TagsInput
@@ -28,6 +29,7 @@ export const Page = () => {
         name="fruits"
         placeHolder="enter fruits"
         disabled={disabled}
+        isEditOnRemove={isEditOnRemove}
         beforeAddValidate={beforeAddValidate}
       />
       <div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
@@ -39,6 +41,15 @@ export const Page = () => {
         </button>
         <pre>Disable: {JSON.stringify(disabled)}</pre>
       </div>
+      <div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
+        <button
+          onClick={() => setisEditOnRemove(!isEditOnRemove)}
+          style={{ marginRight: "2rem" }}
+        >
+          Toggle Keep Words on Backspace
+        </button>
+        <pre>Keep Words on Backspace: {JSON.stringify(isEditOnRemove)}</pre>
+      </div>
     </div>
   );
 };