Onfocus support (rjsf-team#657)

Author: mauriciominella

README.md

@@ -213,6 +213,10 @@ If you plan on being notified everytime the form data are updated, you can pass
 
 Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.
 
+#### Form field focus events
+
+Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.
+
 ## Form customization
 
 ### The `uiSchema` object
@@ -954,6 +958,7 @@ The following props are passed to custom widget components:
 - `readonly`: `true` if the widget is read-only;
 - `onChange`: The value change event handler; call it with the new value everytime it changes;
 - `onBlur`: The input blur event handler; call it with the the widget id and value;
+- `onFocus`: The input focus event handler; call it with the the widget id and value;
 - `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).
 - `formContext`: The `formContext` object that you passed to Form.
 

playground/app.js

@@ -477,6 +477,8 @@ class App extends Component {
  validate={validate}
  onBlur={(id, value) =>
  console.log(`Touched ${id} with value ${value}`)}
+ onFocus={(id, value) =>
+ console.log(`Focused ${id} with value ${value}`)}
  transformErrors={transformErrors}
  onError={log("errors")}>
  <div className="row">

src/components/Form.js

@@ -115,6 +115,12 @@ export default class Form extends Component {
  }
  };
 
+ onFocus = (...args) => {
+ if (this.props.onFocus) {
+ this.props.onFocus(...args);
+ }
+ };
+
  onSubmit = event => {
  event.preventDefault();
  this.setState({ status: "submitted" });
@@ -195,6 +201,7 @@ export default class Form extends Component {
  formData={formData}
  onChange={this.onChange}
  onBlur={this.onBlur}
+ onFocus={this.onFocus}
  registry={registry}
  safeRenderCompletion={safeRenderCompletion}
  />

src/components/fields/ArrayField.js

@@ -304,6 +304,7 @@ class ArrayField extends Component {
  registry = getDefaultRegistry(),
  formContext,
  onBlur,
+ onFocus,
  } = this.props;
  const title = schema.title === undefined ? name : schema.title;
  const { ArrayFieldTemplate, definitions, fields } = registry;
@@ -326,6 +327,7 @@ class ArrayField extends Component {
  itemUiSchema: uiSchema.items,
  autofocus: autofocus && index === 0,
  onBlur,
+ onFocus,
  });
  }),
  className: `field field-array field-array-of-${itemsSchema.type}`,
@@ -357,6 +359,7 @@ class ArrayField extends Component {
  readonly,
  autofocus,
  onBlur,
+ onFocus,
  registry = getDefaultRegistry(),
  } = this.props;
  const items = this.props.formData;
@@ -374,6 +377,7 @@ class ArrayField extends Component {
  multiple
  onChange={this.onSelectChange}
  onBlur={onBlur}
+ onFocus={onFocus}
  options={options}
  schema={schema}
  value={items}
@@ -395,6 +399,7 @@ class ArrayField extends Component {
  readonly,
  autofocus,
  onBlur,
+ onFocus,
  registry = getDefaultRegistry(),
  } = this.props;
  const title = schema.title || name;
@@ -409,6 +414,7 @@ class ArrayField extends Component {
  multiple
  onChange={this.onSelectChange}
  onBlur={onBlur}
+ onFocus={onFocus}
  schema={schema}
  title={title}
  value={items}
@@ -433,6 +439,7 @@ class ArrayField extends Component {
  autofocus,
  registry = getDefaultRegistry(),
  onBlur,
+ onFocus,
  } = this.props;
  const title = schema.title || name;
  let items = this.props.formData;
@@ -481,6 +488,7 @@ class ArrayField extends Component {
  itemErrorSchema,
  autofocus: autofocus && index === 0,
  onBlur,
+ onFocus,
  });
  }),
  onAddClick: this.onAddClick,
@@ -510,6 +518,7 @@ class ArrayField extends Component {
  itemErrorSchema,
  autofocus,
  onBlur,
+ onFocus,
  } = props;
  const {
  disabled,
@@ -541,6 +550,7 @@ class ArrayField extends Component {
  required={this.isItemRequired(itemSchema)}
  onChange={this.onChangeForIndex(index)}
  onBlur={onBlur}
+ onFocus={onFocus}
  registry={this.props.registry}
  disabled={this.props.disabled}
  readonly={this.props.readonly}
@@ -592,6 +602,7 @@ if (process.env.NODE_ENV !== "production") {
  errorSchema: PropTypes.object,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func,
+ onFocus: PropTypes.func,
  formData: PropTypes.array,
  required: PropTypes.bool,
  disabled: PropTypes.bool,

src/components/fields/ObjectField.js

@@ -43,6 +43,7 @@ class ObjectField extends Component {
  disabled,
  readonly,
  onBlur,
+ onFocus,
  registry = getDefaultRegistry(),
  } = this.props;
  const { definitions, fields, formContext } = registry;
@@ -94,6 +95,7 @@ class ObjectField extends Component {
  formData={formData[name]}
  onChange={this.onPropertyChange(name)}
  onBlur={onBlur}
+ onFocus={onFocus}
  registry={registry}
  disabled={disabled}
  readonly={readonly}

src/components/fields/StringField.js

@@ -22,6 +22,7 @@ function StringField(props) {
  autofocus,
  onChange,
  onBlur,
+ onFocus,
  registry = getDefaultRegistry(),
  } = props;
  const { title, format } = schema;
@@ -42,6 +43,7 @@ function StringField(props) {
  value={formData}
  onChange={onChange}
  onBlur={onBlur}
+ onFocus={onFocus}
  required={required}
  disabled={disabled}
  readonly={readonly}
@@ -60,6 +62,7 @@ if (process.env.NODE_ENV !== "production") {
  idSchema: PropTypes.object,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func,
+ onFocus: PropTypes.func,
  formData: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  registry: PropTypes.shape({
  widgets: PropTypes.objectOf(

src/components/widgets/BaseInput.js

@@ -10,6 +10,7 @@ function BaseInput(props) {
  disabled,
  autofocus,
  onBlur,
+ onFocus,
  options,
  schema,
  formContext,
@@ -31,6 +32,7 @@ function BaseInput(props) {
  {...inputProps}
  onChange={_onChange}
  onBlur={onBlur && (event => onBlur(inputProps.id, event.target.value))}
+ onFocus={onFocus && (event => onFocus(inputProps.id, event.target.value))}
  />
  );
 }
@@ -54,6 +56,7 @@ if (process.env.NODE_ENV !== "production") {
  autofocus: PropTypes.bool,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
+ onFocus: PropTypes.func,
  };
 }
 

src/components/widgets/SelectWidget.js

@@ -48,6 +48,7 @@ function SelectWidget(props) {
  autofocus,
  onChange,
  onBlur,
+ onFocus,
  placeholder,
  } = props;
  const { enumOptions } = options;
@@ -68,6 +69,13 @@ function SelectWidget(props) {
  onBlur(id, processValue(schema, newValue));
  })
  }
+ onFocus={
+ onFocus &&
+ (event => {
+ const newValue = getValue(event, multiple);
+ onFocus(id, processValue(schema, newValue));
+ })
+ }
  onChange={event => {
  const newValue = getValue(event, multiple);
  onChange(processValue(schema, newValue));
@@ -107,6 +115,7 @@ if (process.env.NODE_ENV !== "production") {
  autofocus: PropTypes.bool,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
+ onFocus: PropTypes.func,
  };
 }
 

src/components/widgets/TextareaWidget.js

@@ -13,6 +13,7 @@ function TextareaWidget(props) {
  autofocus,
  onChange,
  onBlur,
+ onFocus,
  } = props;
  const _onChange = ({ target: { value } }) => {
  return onChange(value === "" ? options.emptyValue : value);
@@ -29,6 +30,7 @@ function TextareaWidget(props) {
  autoFocus={autofocus}
  rows={options.rows}
  onBlur={onBlur && (event => onBlur(id, event.target.value))}
+ onFocus={onFocus && (event => onFocus(id, event.target.value))}
  onChange={_onChange}
  />
  );
@@ -54,6 +56,7 @@ if (process.env.NODE_ENV !== "production") {
  autofocus: PropTypes.bool,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
+ onFocus: PropTypes.func,
  };
 }
 

test/ArrayField_test.js

@@ -618,6 +618,24 @@ describe("ArrayField", () => {
  expect(onBlur.calledWith(select.id, ["foo", "bar"])).to.be.true;
  });
 
+ it("should handle a focus event", () => {
+ const onFocus = sandbox.spy();
+ const { node } = createFormComponent({ schema, onFocus });
+
+ const select = node.querySelector(".field select");
+ Simulate.focus(select, {
+ target: {
+ options: [
+ { selected: true, value: "foo" },
+ { selected: true, value: "bar" },
+ { selected: false, value: "fuzz" },
+ ],
+ },
+ });
+
+ expect(onFocus.calledWith(select.id, ["foo", "bar"])).to.be.true;
+ });
+
  it("should fill field with data", () => {
  const { node } = createFormComponent({
  schema,