-
Notifications
You must be signed in to change notification settings - Fork 430
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
Conversation
@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?
@AllenFang unfortunately, I have no idea why this does not work, but I will still look for more elegant solutions to this problem
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.
@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
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...
@AllenFang , lol, yes i want focus on the Last Character
p.s bad english ;(
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 } /> ); }
@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}
/>
);
}
}
cc5a185
to
344071d
Compare
344071d
to
8082856
Compare
@khaninD this solution isn't work, you can try on the local...
work!
image
HI @khaninD please switch to develop
branch
There was a problem hiding this 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
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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 ...
There was a problem hiding this comment.
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
focus in the beginning, when you edit cell, it's bad :(
that's fix it ...