From f40e01b39b8b5fc7d6eaf910e507414e3fe116f3 Mon Sep 17 00:00:00 2001 From: Mizga Ionut-Alexandru Date: Wed, 25 Sep 2024 14:27:42 +0300 Subject: [PATCH] fix(number-field): show decimal on iPad minimized keyboard --- packages/number-field/src/NumberField.ts | 44 ++++++++++-------------- 1 file changed, 18 insertions(+), 26 deletions(-) diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts index c5124adf618..406ea4681b7 100644 --- a/packages/number-field/src/NumberField.ts +++ b/packages/number-field/src/NumberField.ts @@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +import { NumberFormatter, NumberParser } from '@internationalized/number'; import { CSSResultArray, html, @@ -21,24 +22,24 @@ import { property, query, } from '@spectrum-web-components/base/src/decorators.js'; +import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js'; import { LanguageResolutionController, languageResolverUpdatedSymbol, } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js'; -import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js'; -import { NumberFormatter, NumberParser } from '@internationalized/number'; -import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js'; -import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js'; +import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js'; +import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js'; +import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js'; import '@spectrum-web-components/infield-button/sp-infield-button.js'; import { isAndroid, + isIOS, isIPhone, } from '@spectrum-web-components/shared/src/platform.js'; import { TextfieldBase } from '@spectrum-web-components/textfield'; -import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; import styles from './number-field.css.js'; export const FRAMES_PER_CHANGE = 5; @@ -241,7 +242,7 @@ export class NumberField extends TextfieldBase { const uniqueSeparators = new Set(separators); if ( - isIPhone() && + isIOS() && this.inputElement.inputMode === 'decimal' && normalizedValue !== this.valueBeforeFocus ) { @@ -806,26 +807,17 @@ export class NumberField extends TextfieldBase { const hasNegative = typeof this.min !== 'undefined' && this.min < 0; const { maximumFractionDigits } = this.numberFormatter.resolvedOptions(); - const hasDecimals = maximumFractionDigits > 0; - /* c8 ignore next 18 */ - if (isIPhone()) { - // iPhone doesn't have a minus sign in either numeric or decimal. - // Note this is only for iPhone, not iPad, which always has both - // minus and decimal in numeric. - if (hasNegative) { - inputMode = 'text'; - } else if (hasDecimals) { - inputMode = 'decimal'; - } - } else if (isAndroid()) { - // Android numeric has both a decimal point and minus key. - // decimal does not have a minus key. - if (hasNegative) { - inputMode = 'numeric'; - } else if (hasDecimals) { - inputMode = 'decimal'; - } - } + const hasDecimals = + maximumFractionDigits && maximumFractionDigits > 0; + + /* c8 ignore next 5 */ + // iPhone doesn't have a minus sign in either numeric or decimal. + if (isIPhone() && hasNegative) inputMode = 'text'; + else if (isIOS() && hasDecimals) inputMode = 'decimal'; + // Android numeric has both a decimal point and minus key. Decimal does not have a minus key. + else if (isAndroid() && hasDecimals && !hasNegative) + inputMode = 'decimal'; + this.inputElement.inputMode = inputMode; } if (