fix(number-field): show decimal on iPad minimized keyboard

adobe · Sep 25, 2024 · f40e01b · f40e01b
1 parent e14d082
commit f40e01b
Showing 1 changed file with 18 additions and 26 deletions.
diff --git 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 (