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.

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

Handled Backspace at the beginning of the TODO element. #46

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Jayesh2812
Copy link

The user can now press Backspace at start of the TODO to do one of the following

  1. If the TODO is empty, delete the item.
  2. If the TODO is not empty combine TODO's name with previous TODO's name.

#37 issue will be fixed by merging this pull request.

@@ -81,6 +87,91 @@ export const Item: FC<Props> = ({
setItemText(items[itemIndex].name);
}, [changeFocus, focus, itemIndex, items]);

useEffect(() => {
Copy link
Contributor

Choose a reason for hiding this comment

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

One useEffect above already doing the same. Can you remove it?

}, [items[itemIndex].name]);

const handleDelete = () => {
items.splice(itemIndex, 1);
Copy link
Contributor

Choose a reason for hiding this comment

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

Before changing the items array. Create a copy of items to avoid reference changes directly. You can do something like this.

const itemsCopy = [...items];
itemsCopy.splice(itemIndex, 1);
setItemsCallback([...itemsCopy]);


if (inputRef.current!.selectionStart) return; // Do nothing if cursor isn't at start.

let previousItemElement = getNthTodoElement(itemIndex - 1);
Copy link
Contributor

Choose a reason for hiding this comment

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

You can use the predefined setFocus function to focus the element. If you need a selection as well you can add one more method to setSelection. That you can do in different PR if needed.


const handleArrowKey : KeyboardEventHandler<HTMLDivElement> = (e) => {
const inputs = document.querySelectorAll("input[type='text']");
const inputsArray = Array.from(inputs);
Copy link
Contributor

Choose a reason for hiding this comment

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

Again try to do the same using the setFocus method.

@Jayesh2812
Copy link
Author

I was out of town for few days, will start working on the changes this week. Thank you so much for the reviews and suggestions 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants