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

[Table/EditableCell] Type in a cell to edit it now #1760

Merged
merged 3 commits into from Nov 7, 2017

Conversation

gscshoyru
Copy link
Contributor

Changes proposed in this pull request:

Typing any character now replaces the cell content with that character and puts it in edit mode, essentially letting you arrow around and type in the correct cell.

@blueprint-bot
Copy link

Type in a cell to edit it now

Preview: documentation | table
Coverage: core | datetime

Copy link
Contributor

@tgreenwatts tgreenwatts left a comment

Choose a reason for hiding this comment

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

Generally looks good to me!

if (this.state.isEditing) {
return;
}
// setting dirty value to empty string because apparently the text field will pick up the key and write it in there
Copy link
Contributor

Choose a reason for hiding this comment

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

This is 123 characters long. Curious why prettier didn't catch this. Can we line-wrap comments to 80 for readability?

Also, can you elaborate a little more on this case?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not sure why it wasn't caught. Basically, apparently, you don't need to insert the character yourself. When switched over to an empty text input (or non-empty one, technically), the bubbling up to the top of the browser will apparently get it to write a character. This is... incredibly weird, but, clearly what is happening, and I'm much happier to let chrome type the character than hope that we got the right one out of the keyboard event.

@cmslewis cmslewis changed the title Type in a cell to edit it now [Table/EditableCell] Type in a cell to edit it now Oct 28, 2017
@llorca
Copy link
Contributor

llorca commented Nov 1, 2017

Working well. A couple of details that I spotted:

  • behaves weirdly when the focus cell isn't enabled: you can type in and edit the cell, confirm, but then cannot type in again in the same cell.
  • doesn't work quite well when typing and going to the next cell super fast.

Also, for some reason, I'm getting much much better success rates when entering edit mode with double click... 🎉

@gscshoyru
Copy link
Contributor Author

@llorca doing this without focus cell enabled is... unsupported. Unless you think it should be? It is certainly somewhat strange (I would agree) that you can type in it at all without double click with focus cell off, and I can try to figure out how to tweak it to turn this off (not... entierly sure how) -- but regardless I don't think it should be a supported use-case.

Can you clarify what you mean by "doesn't work quite well when typing and going to the next cell super fast."?

@llorca
Copy link
Contributor

llorca commented Nov 1, 2017

@gscshoyru yeah I agree, shouldn't be supported, but editable cells without focus cells aren't explicitly disabled right now, which is why it's problematic.

What I mean by "doesn't work quite well when typing and going to the next cell super fast." is: typing in stuff in a cell, then quickly press "enter" then quickly type in again. You'll see that the focus cell unsyncs from the cell being edited because of the fast interactions. If that doesn't make sense, I'll make a GIF tomorrow showcasing the issue. In any case, it'd be neat to fix but I suppose it's lower priority

@gscshoyru
Copy link
Contributor Author

Hmmm... so there's an issue here with the fact that how I'm controlling/have to control focus doesn't work very well with batched rendering. @cmslewis is there a good way to override batching behavior so that it always renders a specific given cell (the focused one) first before anything else? That way focus behavior will behave appropriately, and not have to catch up to itself.

@cmslewis
Copy link
Contributor

cmslewis commented Nov 2, 2017

That's not currently possible, no.

@gscshoyru
Copy link
Contributor Author

Hm, if that's not possible then... I'm not sure how to make this work properly/quickly, with batching. Possibly we need to get cells to keep from constantly re-rendering when they don't need to -- maybe look into the logic some more.

Also, @llorca I've disabled the ability to type-to-edit cells if focus is disabled, which is how it should be :)

@blueprint-bot
Copy link

Disable type-to-edit without focus cell

Preview: documentation | table
Coverage: core | datetime

@@ -79,6 +79,11 @@ export interface ICellProps extends IIntentProps, IProps {
onKeyUp?: React.KeyboardEventHandler<HTMLElement>;

/**
* Callback invoked when a character-key is pressed
Copy link
Contributor

Choose a reason for hiding this comment

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

Need trailing period for consistency.

@blueprint-bot
Copy link

add period

Preview: documentation | table
Coverage: core | datetime

@cmslewis cmslewis merged commit 9437291 into master Nov 7, 2017
@cmslewis cmslewis deleted the gsc/type-to-edit-cells branch November 7, 2017 21:12
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.

None yet

5 participants