diff --git a/packages/ui-number-input/src/NumberInput/index.tsx b/packages/ui-number-input/src/NumberInput/index.tsx index 129c6c320d..0b4dcaffe6 100644 --- a/packages/ui-number-input/src/NumberInput/index.tsx +++ b/packages/ui-number-input/src/NumberInput/index.tsx @@ -75,7 +75,8 @@ class NumberInput extends Component { size: 'medium', display: 'block', textAlign: 'start', - inputMode: 'numeric' + inputMode: 'numeric', + allowStringValue: false } state: NumberInputState = { hasFocus: false } @@ -236,6 +237,7 @@ class NumberInput extends Component { showArrows, value, width, + allowStringValue, styles } = this.props @@ -274,7 +276,7 @@ class NumberInput extends Component { css={this.props.styles?.input} aria-invalid={this.invalid ? 'true' : undefined} id={this.id} - type="number" + type={allowStringValue ? 'text' : 'number'} inputMode={this.props.inputMode} placeholder={placeholder} ref={this.handleInputRef} diff --git a/packages/ui-number-input/src/NumberInput/props.ts b/packages/ui-number-input/src/NumberInput/props.ts index 2cbe96f8ba..d41f03fa75 100644 --- a/packages/ui-number-input/src/NumberInput/props.ts +++ b/packages/ui-number-input/src/NumberInput/props.ts @@ -161,6 +161,11 @@ type NumberInputOwnProps = { * The text alignment of the input. */ textAlign?: 'start' | 'center' + + /** + * sets the input type to string and allows string as value + */ + allowStringValue?: boolean } type NumberInputState = { @@ -220,7 +225,8 @@ const propTypes: PropValidators = { onIncrement: PropTypes.func, onKeyDown: PropTypes.func, inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']), - textAlign: PropTypes.oneOf(['start', 'center']) + textAlign: PropTypes.oneOf(['start', 'center']), + allowStringValue: PropTypes.bool } const allowedProps: AllowedPropKeys = [ @@ -243,7 +249,8 @@ const allowedProps: AllowedPropKeys = [ 'onIncrement', 'onKeyDown', 'inputMode', - 'textAlign' + 'textAlign', + 'allowStringValue' ] export type {