From 8505994709ef25367d25c57e808989a3ac7e35d3 Mon Sep 17 00:00:00 2001 From: zack Date: Tue, 28 May 2019 21:49:22 +0800 Subject: [PATCH 1/2] Fix(InputItem): add try catch to getSelection (#3236) --- components/input-item/index.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/components/input-item/index.tsx b/components/input-item/index.tsx index 22e847c8d0..d5406ade19 100644 --- a/components/input-item/index.tsx +++ b/components/input-item/index.tsx @@ -92,7 +92,15 @@ class InputItem extends React.Component { onInputChange = (e: React.ChangeEvent) => { const el = e.target; - const { value: rawVal, selectionEnd: prePos } = el; + const { value: rawVal } = el; + + let prePos = 0; + try { + prePos = el.selectionEnd || 0; + } catch (error) { + console.warn('Get selection error:', error); + } + const { value: preCtrlVal = '' } = this.state; const { type } = this.props; @@ -129,7 +137,7 @@ class InputItem extends React.Component { // 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); + 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; } From 698f12968b02b72c6465175af6cf6d7536f5e500 Mon Sep 17 00:00:00 2001 From: zack Date: Tue, 28 May 2019 22:31:07 +0800 Subject: [PATCH 2/2] Fix(InputItem): update comment --- components/input-item/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/input-item/index.tsx b/components/input-item/index.tsx index d5406ade19..21b5e772a0 100644 --- a/components/input-item/index.tsx +++ b/components/input-item/index.tsx @@ -96,6 +96,7 @@ class InputItem extends React.Component { 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; } catch (error) { console.warn('Get selection error:', error); @@ -136,7 +137,7 @@ class InputItem extends React.Component { 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) + // 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;