however, "console.log("cboBox", cboBox)" outputs "cboBox {current: null}" so that still doesn't work.

I've got a functional component wrapped around a formfield+tooltip+combobox like so:

Code:

export const ComboField = ({ label, name, hidden, invisible, tooltip, labelWidth, style, cboStyle, ...rest }) => {
	const cboBox = useRef(null);

	if (!style) style = {};
	if (hidden === true) {
		style["display"] = "none";
	}
	if (invisible === true) {
		style["visibility"] = "hidden";
	}

	return (
		<FormField name={name} label={label} labelWidth={labelWidth || "unset"} style={{ ...{ marginBottom: "5px", marginRight: "10px" }, ...style }}>
			<Tooltip position="left" content={tooltip}><i className={tooltip ? "fas fa-question-circle" : ""} style={{ fontSize: "14px" }} /></Tooltip>
			<ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }} 
				onFocus={() => {
					if(!rest.editable) {
						console.log("cboBox", cboBox)
						cboBox.openPanel()
					}
				} }
			/>
		</FormField>
	);
}

I'm trying to make it so when you tab into any non-editable combobox that it auto opens the panel. 

my console log is "cboBox {current: null}".  what should I be doing different?

the main reason I want to do this is because there's no focus indication on the box when the form validation has an error state, and the only keyboard input that show any response are the up and down arrow. the standard html select will select an item when its first letter is pressed.  it would be great if this behavior could be added as users are familiar with it.

so adding "key: this.props.key" didn't work, but "key: 1" did.

is there a way to disable all fields in a Form on one shot?

I've also found that onEditValidate fires simply by clicking a field that has a ComboBox based editor.

originalValue seems as I'd expect for editMode=row, but for editMode=cell originalValue is always undefined.  is there some other way i can test if the data actually changed?

it's doing it every time now.  maybe it was before and I scrolled past, I had a lot of console logging at the time.

I tried adding key to the props that get copied, no effect, which isn't surprising since I'm not passing a key.

I'm calling my component like:

Code:

			<FormField name="fieldname" style={{ marginBottom: "5px", marginRight: "10px" }} label="Field Name">
				<MeasureBox value=5 units="si" />
			</FormField>

the error points to the span that InputBase generates, I'm not sure what clue that holds.

apply the filters yourself?

it would be great if that change event also gave a reference to the filtered list object, but it's not that hard to run it yourself

what did you try?  I don't see any onFilterChange there.

closest I've found is to use the onFilterChange event

I have a complex form with about 50 fields, but only 20 of them have rules, though I'll likely expand that.

when i call validate(), whether or not there are any rule errors, I'm seeing a fairly consistent 4.5 second delay on an N3350 Chromebook and 1.2 second delay on an i5-8400.  latest Chrome browser versions.  my timing is logging `Date().getTime()` on the line before calling validate and again on the first line in the callback.  1 second I can deal with, 4 seconds I cannot.

I do have a custom validateRules and most of the 20 fields do have more than one. 

in testing, I've changed it to "rules={{}}" and the delay remains, so I don't see how it could be my rules, which aren't very complex.  I've also removed "rules={myModelrules}" and the callback is never called, which I guess is expected, but it is very fast.

without changing anything, I'm only getting this intermittently, and mostly not.  will address later if it comes back reliably.

one issue:

Code:

index.js:1437 Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in span
    in MeasureBox
    ...

in the generated html, the TextBox formfields and my new MeasureBox formfields have all the same properties, but TextBox does not give this warning.  do I just need to suppress it somehow, or did I do something incorrectly?

this seems to work

Code:

class MeasureBox extends InputBase {
	constructor(props) {
		super(props);
	}

	handleInputChange(e) {
		if (this.props.units === "met")
			this.setState({ valueMet: e.target.value });
		
		if(e.target.value === "" || isNaN(e.target.value)) {
			this.setValue(e.target.value);
		} else {
			this.setValue(parseFloat(util.toStore(e.target.value, this.props.units)));
		}
	}

	text() {
		return this.props.textFormatter(this.state.valueMet === undefined  
			? isNaN(this.state.text) ? this.state.text : util.toDisp(this.state.text, this.props.units)
			: this.state.valueMet);
	}

	renderInput() {
		const props = {
			autoComplete: "off",
			className: this.inputClasses(),
			id: this.props.inputId,
			style: this.props.inputStyle,
			value: this.text(),
			onFocus: this.focus.bind(this),
			onBlur: this.blur.bind(this),
			onChange: this.handleInputChange.bind(this),
			tabIndex: this.props.tabIndex
		}

		return (
			<input {...props}></input>
		)
	}
}

had to add the extra value to preserve whatever the user types in from being re-converted.  suggestions on improvements?

I would like to use Form and FormField, but I'd like some of my fields to displayed and edited in metric or Si units based on a user preference, while always being stored in Si units in the model. 

I was thinking of making my own function component that wraps the typical form field and hides it while instead displaying a TextBox with the users preferred units, but i can't work out a manageable way to get the changes back into the formfield since none of these components seem to have a method for setting the value.

one thing that comes to mind is passing a function to change the original model in the parent state.  Form and FormField seems to be able to affect the model without these special function, but i can't quite work out how.

the other is to keep a metric and si copy of each value in the model, but that seem messy and error prone.

is there some way to trigger a formfield, or the textbox inside it, to update the model programatically that I've overlooked?