Update for custom input types

PULL_REQUEST_TEMPLATE.md

@@ -6,12 +6,12 @@ If this is related to existing tickets, include links to them as well.
 
 ### Checklist
 
-* [ ] **I'm updating documentation**
-  - [ ] I've checked the rendering of the Markdown text I've added
-  - [ ] If I'm adding a new section, I've updated the Table of Content
-* [ ] **I'm adding or updating code**
-  - [ ] I've added and/or updated tests
-  - [ ] I've updated docs if needed
-  - [ ] I've run `npm run cs-format` on my branch to conform my code to [prettier](https://github.com/prettier/prettier) coding style
-* [ ] **I'm adding a new feature**
-  - [ ] I've updated the playground with an example use of the feature
+* [x] **I'm updating documentation**
+  - [x] I've checked the rendering of the Markdown text I've added
+  - [x] If I'm adding a new section, I've updated the Table of Content
+* [x] **I'm adding or updating code**
+  - [x] I've added and/or updated tests
+  - [x] I've updated docs if needed
+  - [x] I've run `npm run cs-format` on my branch to conform my code to [prettier](https://github.com/prettier/prettier) coding style
+* [x] **I'm adding a new feature**
+  - [x] I've updated the playground with an example use of the feature

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);
   };

src/utils.js

@@ -249,9 +249,9 @@ export function orderProperties(properties, order) {
       return prev;
     }, {});
   const errorPropList = arr =>
-    (arr.length > 1
+    arr.length > 1
       ? `properties '${arr.join("', '")}'`
-      : `property '${arr[0]}'`);
+      : `property '${arr[0]}'`;
   const propertyHash = arrayToHash(properties);
   const orderHash = arrayToHash(order);
   const extraneous = order.filter(prop => prop !== "*" && !propertyHash[prop]);

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", () => {