Datetime and select intent danger class in redux form validation

[alearcy]

Bug report

• Package version(s): 1.3.1
• Browser and OS versions: Chrome 55.0.2883.87, MacOs Sierra

Steps to reproduce

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import classnames from 'classnames'
import {Button, Colors, Position} from '@blueprintjs/core'
import { DateInput } from "@blueprintjs/datetime"
import './form-date-picker.css'

const validate = values => {
	const errors = {};
	if (!values.vehicleNumber) {
		errors.vehicleNumber = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleDriver) {
		errors.vehicleDriver = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleKm) {
		errors.vehicleKm = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleAssicurationEnd) {
		errors.vehicleAssicurationEnd = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleTaxEnd) {
		errors.vehicleTaxEnd = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleRevisionEnd) {
		errors.vehicleRevisionEnd = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleAssicurationName) {
		errors.vehicleAssicurationName = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleAssicurationId) {
		errors.vehicleAssicurationId = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleType) {
		errors.vehicleType = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleDriver) {
		errors.vehicleDriver = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleDriverDate) {
		errors.vehicleDriverDate = 'Questo campo è obbligatorio'
	}
	if (!values.vehicleCheck) {
		errors.vehicleCheck = 'Questo campo è obbligatorio'
	}
	return errors
};

const nextYears = new Date(2040, 12, 31);

const renderField = ({ input, label, type, meta: { touched, error } }) => (
	<div className="input-margin-bottom">
		<label className="pt-label">{label}</label>
		<input {...input} type={type} className={classnames({'pt-intent-danger': touched && (error), 'pt-input': true, 'pt-fill': true})} />
		<div className='text-danger'>{touched ? error : ''}</div>
	</div>
);

const renderDate = ({ input, label, type, meta: { touched, error } }) => (
	<div className="input-margin-bottom date-fill">
		<label className="pt-label">{label}</label>
		<DateInput {...input} locale="it" maxDate={nextYears} format="DD-MM-YYYY" popoverPosition={Position.BOTTOM_RIGHT} className={classnames({'pt-intent-danger': touched && (error), 'pt-fill': true})} />
		<div className='text-danger'>{touched ? error : ''}</div>
	</div>
);

const renderSelectDriversField = ({ input, drivers, label, meta: { touched, error } }) => (
	<div className="input-margin-bottom">
		<label className="pt-label">{label}
		{/*TODO: controllare come fare a mettere classe danger su select*/}
			<div className='pt-select pt-fill' >
				<select {...input} className={classnames({'pt-intent-danger': touched && (error)})} >
					<option disabled></option>
					{drivers.map(driver=>{
						return <option key={driver.key} value={driver.driverName + ' ' + driver.driverLastname}>{driver.driverName + ' ' + driver.driverLastname}</option>
					})}
				</select>
			</div>
			<div className='text-danger'>{touched ? error : ''}</div>
		</label>
	</div>
);

const renderSelectField = ({ input, label, meta: { touched, error } }) => (
	<div className="input-margin-bottom">
		<label className="pt-label">{label}
			{/*TODO: controllare come fare a mettere classe danger su select*/}
			<div className={classnames({'pt-intent-danger': touched && (error), 'pt-select': true, 'pt-fill': true})}>
				<select {...input} >
					<option disabled></option>
					<option value="furgone">Furgone</option>
					<option value="passo lungo">Furgone passo lungo</option>
					<option value="cassonato">Cassonato</option>
					<option value="cassonato sponda">Cassonato con sponda</option>
					<option value="motrice">Motrice</option>
					<option value="motrice sponda">Motrice con sponda</option>
					<option value="van">Van</option>
				</select>
			</div>
			<div className='text-danger'>{touched ? error : ''}</div>
		</label>
	</div>
);

const renderSelectFuelField = ({ input, label, meta: { touched, error } }) => (
	<div className="input-margin-bottom">
		<label className="pt-label">{label}
			{/*TODO: controllare come fare a mettere classe danger su select*/}
			<div className={classnames({'pt-intent-danger': touched && (error), 'pt-select': true, 'pt-fill': true})}>
				<select {...input} >
					<option disabled></option>
					<option value="diesel">Diesel</option>
					<option value="benzina">Benzina</option>
					<option value="metano">Metano</option>
					<option value="ibrido">Ibrido</option>
					<option value="elettrico">Elettrico</option>
				</select>
			</div>
			<div className='text-danger'>{touched ? error : ''}</div>
		</label>
	</div>
);

const VehicleForm = (props) => {
	const {handleSubmit, submitted, pristine, vehicle, drivers} = props;
	return (
		<div>
			<h1 className="text-center margin-bottom">{(vehicle == null) ? "Nuovo automezzo" : vehicle.key}</h1>
			<form onSubmit={handleSubmit} className="col-md-6 col-md-offset-3">
				<Field name="vehicleName" label="Nome automezzo" component={renderField} type="text" />
				<Field name="vehicleDriver" label="Assegnato a:*" component={renderSelectDriversField} drivers={drivers} />
				<Field name="vehicleDriverDate" label="Assegnato in data:*" component={renderDate} />
				<Field name="vehicleCheck" label="Tagliando fatto a*" component={renderField} type="number" />
				<Field name="vehicleNumber" label="Targa*" component={renderField} type="text" />
				<Field name="vehicleKm" label="Chilometri aggiornati*" component={renderField} type="number" />
				<Field name="vehicleFuel" label="Carburante" component={renderSelectFuelField} />
				<Field name="vehicleAssicurationEnd" label="Scadenza assicurazione*" component={renderDate} />
				<Field name="vehicleAssicurationName" label="Nome assicurazione*" component={renderField} type="text" />
				<Field name="vehicleAssicurationId" label="Codice pratica assicurativa*" component={renderField} type="text" />
				<Field name="vehicleTaxEnd" label="Scadenza bollo*" component={renderDate} />
				<Field name="vehicleRevisionEnd" label="Scadenza revisione*" component={renderDate} />
				<Field name="vehicleType" label="Tipologia*" component={renderSelectField} />
				<Button type="submit" disabled={pristine || submitted} className="pt-intent-primary" text="Salva" />
			</form>
		</div>
	);
};

export default reduxForm({
	form: 'newVehicleForm',
	validate
})(VehicleForm);

Actual behavior

When I leave text input, number input and textarea, pt-intent-danger class is correctly call when validation fails. Strange behavior in select input and datetime component. In select only error message appears but danger class in input border doesn't. In datetime both error message and danger class doesn't appear.

Expected behavior

Select must have a danger class applied to the border like other input components.
Datetime must have both danger class like select and probably a callback at blur to fire validation like others.

[giladgray]

1. classes for .pt-select go on the element with that class, not the <select> tag itself
2. however, .pt-select simply doesn't support the 4 intents right now.
3. looks like DateInput does not have a way to put classes on the <input> itself, only on the container. however, see the code here for how we determine internally when a date is invalid; maybe you could reuse that logic somehow.

your issue above is very hard to read; i would suggest filing new issues for points 2 and 3 above scoped just to those little issues.

[giladgray]

closing as stale