Update for custom input types (rjsf-team#572)

* Update for custom input types * remove checked boxes from pull_request_template

Author: SampsonCrowley

README.md

@@ -49,6 +49,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Textarea rows option](#textarea-rows-option)
  - [Placeholders](#placeholders)
  - [Field labels](#field-labels)
+ - [HTML5 Input Types](#html5-input-types)
  - [Form attributes](#form-attributes)
  - [Advanced customization](#advanced-customization)
  - [Field template](#field-template)
@@ -700,6 +701,19 @@ const uiSchema = {
 };
 ```
 
+### HTML5 Input Types
+
+If all you need to do is change the input type (for using things like input type="tel") you can specify the `inputType` from `ui:options` uiSchema directive.
+
+```jsx
+const schema = {type: "string"};
+const uiSchema = {
+ "ui:options": {
+ inputType: 'tel'
+ }
+};
+```
+
 ### Form attributes
 
 Form component supports the following html attributes:

playground/samples/simple.js

@@ -26,6 +26,11 @@ module.exports = {
  title: "Password",
  minLength: 3,
  },
+ telephone: {
+ type: "string",
+ title: "Telephone",
+ minLength: 10,
+ },
  },
  },
  uiSchema: {
@@ -46,6 +51,11 @@ module.exports = {
  date: {
  "ui:widget": "alt-datetime",
  },
+ telephone: {
+ "ui:options": {
+ inputType: "tel",
+ },
+ },
  },
  formData: {
  firstName: "Chuck",

src/components/widgets/BaseInput.js

@@ -16,6 +16,8 @@ function BaseInput(props) {
  registry,
  ...inputProps
  } = props;
+
+ inputProps.type = options.inputType || inputProps.type || "text";
  const _onChange = ({ target: { value } }) => {
  return props.onChange(value === "" ? options.emptyValue : value);
  };

test/uiSchema_test.js

@@ -89,6 +89,7 @@ describe("uiSchema", () => {
  funcNone: { type: "string" },
  stringAll: { type: "string" },
  stringNone: { type: "string" },
+ stringTel: { type: "string" },
  },
  };
 
@@ -126,6 +127,11 @@ describe("uiSchema", () => {
  stringNone: {
  "ui:widget": "widget",
  },
+ stringTel: {
+ "ui:options": {
+ inputType: "tel",
+ },
+ },
  };
  });
 
@@ -195,6 +201,12 @@ describe("uiSchema", () => {
  expect(widget.style.margin).to.equal("");
  expect(widget.style.padding).to.equal("");
  });
+
+ it("should ui:option inputType for html5 input types", () => {
+ const { node } = createFormComponent({ schema, uiSchema, widgets });
+ const widget = node.querySelector("input[type='tel']");
+ expect(widget).to.not.be.null;
+ });
  });
 
  describe("nested widget", () => {