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.

Sign up for GitHub

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

Jump to bottom

Fix(InputItem): add try catch to getSelection (#3236) #3237

Merged
merged 2 commits into from
Jun 12, 2019
Merged

Fix(InputItem): add try catch to getSelection (#3236) #3237

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8505994
Fix(InputItem): add try catch to getSelection (#3236)
zack24q May 28, 2019
698f129
Fix(InputItem): update comment
zack24q May 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 12 additions & 3 deletions components/input-item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,16 @@ class InputItem extends React.Component<InputItemProps, any> {

onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const el = e.target;
const { value: rawVal, selectionEnd: prePos } = el;
const { value: rawVal } = el;

let prePos = 0;
try {
// some input type do not support selection, see https://html.spec.whatwg.org/multipage/input.html#do-not-apply
prePos = el.selectionEnd || 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

备注下为啥会异常？

Copy link
Contributor

Choose a reason for hiding this comment

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

05b9d86

Copy link
Contributor

Choose a reason for hiding this comment

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

感觉这样写会比较直观。

try {
  
      prePos = el.selectionEnd;
} catch (e) {
   prePos = 0;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

这样子改TS会报错：不能将类型“number | null”分配给类型“number”

Copy link
Contributor Author

Choose a reason for hiding this comment

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

异常的原因注释已加哈

Copy link
Contributor

Choose a reason for hiding this comment

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

catch到错误只是console.warn么，没有兜底措施吗？

Copy link
Contributor Author

Choose a reason for hiding this comment

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

兜底就是不处理光标位置了

} catch (error) {
console.warn('Get selection error:', error);
}

const { value: preCtrlVal = '' } = this.state;
const { type } = this.props;

Expand Down Expand Up @@ -128,8 +137,8 @@ class InputItem extends React.Component<InputItemProps, any> {
case 'number':
// controlled input type needs to adjust the position of the caret
try {
// set selection may throw error (https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
let pos = this.calcPos(prePos || 0, preCtrlVal, rawVal, ctrlValue, [' '], /\D/g);
// some input type do not support selection, see https://html.spec.whatwg.org/multipage/input.html#do-not-apply
let pos = this.calcPos(prePos, preCtrlVal, rawVal, ctrlValue, [' '], /\D/g);
if ((type === 'phone' && (pos === 4 || pos === 9)) || (type === 'bankCard' && (pos > 0 && pos % 5 === 0))) {
pos -= 1;
}
Expand Down