How to set maximum length in input type=number (ok)

wp-content/plugins/genesis-custom-blocks/js/src/block-editor/controls/number.js

/**
 * External dependencies
 */
import * as React from 'react';
import classNames from 'classnames';

/**
 * WordPress dependencies
 */
import { TextControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const GcbNumberControl = ( props ) => {
	const { field, getValue, onChange } = props;
	const initialValue = getValue( props );
	const value = 'undefined' !== typeof initialValue ? initialValue : field.default;
	const [ isError, setIsError ] = useState( false );
	function maxLengthCheck(object){
		if (object.target.value.length > object.target.maxLength) {
			object.target.value = object.target.value.slice(0, object.target.maxLength)
		}
	}
	return (
		<TextControl
			className={ classNames( {
				'text-control__erroraaaa': isError,
			} ) }
			type="number"
			label={ field.label }
			placeholder={ field.placeholder || '' }
			help={ field.help }
			value={ value }
			maxLength ={field.maxlength}
			onInput={(object)=>maxLengthCheck(object)}
			onChange={ ( numberControl ) => {
				onChange( Number( numberControl ) );
			} }
			onFocus={ ( event ) => {
				setIsError( ! event.target.reportValidity() );
			} }
			onBlur={ ( event ) => {
				setIsError( ! event.target.checkValidity() );
			} }
		/>
	);
};

export default GcbNumberControl;

Last updated

Was this helpful?