Pass arbitrary props to the tel input element

src/components/TelInput.js

@@ -14,11 +14,15 @@ class TelInput extends Component {
     handleOnBlur: PropTypes.func,
     autoFocus: PropTypes.bool,
     autoComplete: PropTypes.string,
+    inputProps: PropTypes.object,
   };
 
   render() {
     return (
-      <input type="tel" autoComplete={this.props.autoComplete}
+      <input
+        {...this.props.inputProps}
+        type="tel"
+        autoComplete={this.props.autoComplete}
         className={this.props.className}
         disabled={this.props.disabled ? 'disabled' : false}
         readOnly={this.props.readonly ? 'readonly' : false}

src/containers/IntlTelInputApp.js

@@ -58,6 +58,8 @@ export default class IntlTelInputApp extends Component {
     // whether to use fullscreen flag dropdown for mobile useragents
     useMobileFullscreenDropdown: true,
     autoComplete: 'off',
+    // pass through arbitrary props to the tel input element
+    telInputProps: {},
   };
 
   static propTypes = {
@@ -90,6 +92,7 @@ export default class IntlTelInputApp extends Component {
     autoComplete: PropTypes.string,
     style: PropTypes.object,
     useMobileFullscreenDropdown: PropTypes.bool,
+    telInputProps: PropTypes.object,
   };
 
   constructor(props) {
@@ -1126,6 +1129,7 @@ export default class IntlTelInputApp extends Component {
           placeholder={this.state.placeholder}
           autoFocus={this.props.autoFocus}
           autoComplete={this.props.autoComplete}
+          inputProps={this.props.telInputProps}
         />
       </div>
     );

src/index.html

@@ -281,6 +281,11 @@ <h2>Props</h2>
                 <td><code>true</code></td>
                 <td>Render fullscreen flag dropdown when mobile useragent is detected. The dropdown element is rendered as a direct child of <code>document.body</code></td>
               </tr>
+              <tr>
+                <th scope="row">telInputProps</th>
+                <td><code>{}</code></td>
+                <td>Pass through arbitrary props to the tel input element.</td>
+              </tr>
             </tbody>
           </table>
         </div>