Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix focus on the Last Character in Text Input #62

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

Closed
khaninD wants to merge 8 commits into react-bootstrap-table:develop from khaninD:fixFocus

Conversation

Copy link
Contributor

@khaninD khaninD commented Sep 19, 2017

focus in the beginning, when you edit cell, it's bad :(
that's fix it ...

smoleniuch reacted with thumbs up emoji
Copy link
Member

@khaninD thanks your contribution, but TextEditor already focus in the beginning of text input when mounting:
https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/feat/cell-editor/packages/react-bootstrap-table2/src/text-editor.js#L6

and any idea why assign the value again with defaultValue?

Copy link
Contributor Author

khaninD commented Sep 19, 2017

@AllenFang unfortunately, I have no idea why this does not work, but I will still look for more elegant solutions to this problem

Copy link
Member

original solution work well in my client, actually, react-bootstrap-table also use this solution too, so could you share something to prove the current solution is not work? maybe share a little webcam record.

Copy link
Member

@khaninD I push some new code to branch feat/cell-editor please pull/rebase it

you can run npm run storybook and check the example I wrote for cell editing and checking if it is work without your patch, thanks

@AllenFang AllenFang added this to the 0.1.0 milestone Sep 19, 2017
Copy link
Member

AllenFang commented Sep 19, 2017
edited
Loading

I guess I probably know your question, is you want to focus on the Last Character in Text Input ???
If yes, I think your title of PR make me confuse lol...

Copy link
Contributor Author

khaninD commented Sep 19, 2017

@AllenFang , lol, yes i want focus on the Last Character

p.s bad english ;(

Copy link
Member

it's ok, some solution we can use but not very elegant:

onFocus = (e) => {
 e.target.value = '';
 e.target.value = this.props.defaultValue;
 }
 render() {
 return (
 <input
 ref={ node => this.text = node }
 type="text"
 onFocus={ this.onFocus }
 className="form-control editor edit-text"
 { ...this.props }
 />
 );
 }

Copy link
Contributor Author

khaninD commented Sep 19, 2017
edited
Loading

@AllenFang what you think about it:
p.s update commit

 componentDidMount() {
 const { defaultValue } = this.props;
 this.text.value = defaultValue;
 this.text.focus();
 }
 render() {
 const {
 onKeyDown,
 onBlur
 } = this.props;
 return (
 <input
 ref={ node => this.text = node }
 type="text"
 className="form-control editor edit-text"
 onKeyDown={onKeyDown}
 onBlur={onBlur}
 />
 );
 }
}

@khaninD khaninD force-pushed the fixFocus branch 2 times, most recently from cc5a185 to 344071d Compare September 19, 2017 19:47
@khaninD khaninD changed the title (削除) fix focus in the beginning textInput (削除ここまで) (追記) fix focus on the Last Character in Text Input (追記ここまで) Sep 19, 2017
Copy link
Member

@khaninD this solution isn't work, you can try on the local...

Copy link
Contributor Author

khaninD commented Sep 20, 2017
edited
Loading

Copy link
Member

HI @khaninD please switch to develop branch

Copy link
Member

@AllenFang AllenFang left a comment

Choose a reason for hiding this comment

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

Please remember to switch branch to develop. thanks

const {
onKeyDown,
onBlur
} = this.props;
Copy link
Member

@AllenFang AllenFang Sep 20, 2017

Choose a reason for hiding this comment

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

Please update as following

const { defaultValue, ...rest } = this.props;
<input
 ref={ node => this.text = node }
 type="text"
 className="form-control editor edit-text"
 { ...rest }
 />

For this kind of little component, people sometime forgot to add some props when there's new props coming

Copy link
Contributor Author

@khaninD khaninD Sep 20, 2017
edited
Loading

Choose a reason for hiding this comment

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

@AllenFang , good decision.
I have to switch to develop branch and make changes there and push it?

i don't undertand what I did wrong ???? sorry ...

Copy link
Member

@AllenFang AllenFang Sep 21, 2017

Choose a reason for hiding this comment

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

Actually, I already help you to switch branch to develop. but seems like you merge the upstream instead of rebase. so in this PR, you have my commits... but you open another PR is good for me. let's decline this PR, thanks

@AllenFang AllenFang changed the base branch from feat/cell-editor to develop September 20, 2017 16:25
@AllenFang AllenFang changed the base branch from develop to feat/cell-editor September 20, 2017 16:26
@AllenFang AllenFang changed the base branch from feat/cell-editor to develop September 20, 2017 16:26
@khaninD khaninD deleted the fixFocus branch September 23, 2017 10:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AllenFang AllenFang AllenFang requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
0.1.0
Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /