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

need to fix - onChange Event Issues #77

Closed
sayshark75 opened this issue Jul 6, 2023 · 7 comments
Closed

need to fix - onChange Event Issues #77

sayshark75 opened this issue Jul 6, 2023 · 7 comments
Labels
bug Indicates an unexpected problem or unintended behavior. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help! idle Issues and pull requests with no activity for three months.

Comments

@sayshark75
Copy link

What information was incorrect, unhelpful, or incomplete?

How I am facing issues => When I click on Edit on any Todo and try to clear the entire field, I get the original text back again.

The issue occurred in => the Edit-Template.

What did you expect to see?

The Input Field Must be completely Clear and User can type Entirely New Name of Todo.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

That is enough to get a reference to the actual error point.

@sayshark75 sayshark75 added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Jul 6, 2023
@github-actions
Copy link

github-actions bot commented Jul 6, 2023

It looks like this is your first issue. Welcome! 👋
One of the project maintainers will be with you as soon as possible. We
appreciate your patience. To safeguard the health of the project, please
take a moment to read our code of conduct.

@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Aug 6, 2023
@RaviSolanki27
Copy link

attempt

@github-actions github-actions bot removed the idle Issues and pull requests with no activity for three months. label Aug 17, 2023
@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Sep 17, 2023
@caugner caugner added bug Indicates an unexpected problem or unintended behavior. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help! and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Oct 2, 2023
@caugner
Copy link

caugner commented Oct 2, 2023

I was able to reproduce the issue on https://mdn.github.io/todo-react/:

Screen.Recording.2023-10-02.at.13.23.54.mov

@caugner
Copy link

caugner commented Oct 2, 2023

The reason is value={newName || props.name} here:

<input
id={props.id}
className="todo-text"
type="text"
value={newName || props.name}
onChange={handleChange}
ref={editFieldRef}
/>

As soon as newName is emptied, the props.name (aka the previous name) is shown.

Instead: newName should be initialized with props.name and props.name could be added as a placeholder.

However, it is then important to ensure that the todo item cannot be saved with an empty name (just like "Add" doesn't do anything if the field is empty).

@RaviSolanki27
Copy link

value={isEditing ? newName : props.name}

Just do these changes and it will work

@github-actions github-actions bot removed the idle Issues and pull requests with no activity for three months. label Oct 3, 2023
@sayshark75
Copy link
Author

sayshark75 commented Oct 5, 2023

<input id={props.id} className="todo-text" type="text" value={newName || props.name} onChange={handleChange} ref={editFieldRef} />

  • The Issue lies in the value, when newName becomes "", it uses props.name

  • Instead, we can use onBlur Event on the input, and in onBlur event, we can check if the newName is Empty, then we will use the props.name.

  • I want to work on this

@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Nov 5, 2023
@bsmth
Copy link
Member

bsmth commented Dec 8, 2023

Thanks all, I'm closing this one as done now! Well done on the great approaches to improving the example! 👏🏻

See

@bsmth bsmth closed this as completed Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Indicates an unexpected problem or unintended behavior. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help! idle Issues and pull requests with no activity for three months.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants