Todo item flashes red order before disappearing when marked done and Active selected

[Kenneth Tilton]

First, just digging into Helix, looks great. I am looking to integrate my Mobx-like state management system with React and this library could be the leg up I need on React. These issues are reported only to better understand whether there are some deep issues with React integration that I will run into as well. A couple are just deviations from the reference implementation.

input field highlighting

Set-up:

• fresh page load

Problem:

• input field is highlighted active with red border

Discussion:

• this deviates from the TodoMVC reference Backbone implementation and several others I checked, including the main React entry. It is standard U/X, so it is fine in that respect.
• the reference implementation, FWIW, highlights the border only for an existing to-do while it is being edited.

to-do list item highlighting

Set-up:

• create at least two to-do's
• select "All" as items to show
• mark one of the items "done"

Problem:

• the to-do bounding box, text and controls, is highlighted

Discussion:

• same as above, but mentioning it in this "existing to-do" context because it may be the cause of the next issue

to-do list item flashing

Set-up:

• select "All" as items to show
• create at least two to-do's
• select "Active" as items to show
• mark one of the items "done"

Problem:

• the disappearing to-do flashes before disappearing

Discussion:

• The flash seems to be the red border that would appear were "All" selected, and the completed to-do would be remaining visible. This one is my big concern. It would seem two full state propagations followed by renders are taking place:

1. the to-do is flagged as focused, triggering the red border being fully rendered (not just a transient CSS state change never actually rendered); and
2. the to-do is marked completed, causing it to be dropped from the to-do list container and omitted when that re-renders.

So, thanks to the superior U/X that highlights focused items, we see (guessing) a problem with state management. If we keep the superior U/X, is it possible to avoid the double state propagation such that the to-do list item gains focus and gets dropped from the render list of the to-do list all as one state propagation?

Thanks again for a great interface to React.

[Will Acton]

The discrepancies you're noting between this todomvc and the apps deployed on todomvc.com (i.e. https://todomvc.com/examples/react/#/) seem to stem from some slight differences in the index.css that are installed via npm.

Specifically this:

:focus,
.toggle:focus + label,
.toggle-all:focus + label {
	box-shadow: 0 0 2px 2px #CF7D7D;
	outline: 0;
}

Doesn't seem to be present in the examples on the todomvc website.

I don't understand why they're different; I've bumped the todomvc-app-css package to the latest version and still see the difference in styling. At least, it doesn't seem to be due to a difference in implementation in this repository.

As for removing the box when dropping an item from the list, I don't think we can easily do that and I don't think it is desired; the :focus selector gets triggered (at least in chrome) on mouse down, while the application state change is triggered on click. I think it would be bad UX to trigger the application state change on mouse down, and I'm not even sure if it would elide the red border before disappearing. Browser's do what they want 😛

[Will Acton]

Since my last message was a bit rambly, just to be clear, these discrepancies do not seem to be related to helix or React at all.