Fix URL entry to use form submission and improved errors if protocol isn't present.

src/components/Button.jsx

@@ -15,6 +15,7 @@ class Button extends React.Component {
 
   render() {
     return <button
+      type={this.props.type}
       onClick={this.props.onClick}
       disabled={this.props.disabled}
       aria-label={this.props["aria-label"]}

src/components/inputs/UrlInput.jsx

@@ -1,10 +1,14 @@
-import React from 'react'
+import React, {Fragment} from 'react'
 import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import SmallError from '../util/SmallError'
 
 
 function validate (url) {
+  if (url === "") {
+    return;
+  }
+
   let error;
   const getProtocol = (url) => {
     try {
@@ -16,7 +20,20 @@ function validate (url) {
     }
   };
   const protocol = getProtocol(url);
-  if (
+  const isSsl = window.location.protocol === "https:";
+
+  if (!protocol) {
+    error = (
+      <SmallError>
+        Must provide protocol {
+          isSsl
+          ? <code>http://</code>
+          : <><code>http://</code> or <code>https://</code></>
+        }
+      </SmallError>
+    );
+  }
+  else if (
     protocol &&
     protocol === "http:" &&
     window.location.protocol === "https:"
@@ -61,12 +78,20 @@ class UrlInput extends React.Component {
     this.props.onInput(url);
   }
 
+  onChange = (url) => {
+    this.setState({
+      error: validate(url)
+    });
+    this.props.onChange(url);
+  }
+
   render () {
     return (
       <div>
         <StringInput
           {...this.props}
           onInput={this.onInput}
+          onChange={this.onChange}
         />
         {this.state.error}
       </div>

src/components/modals/OpenModal.jsx

@@ -123,7 +123,8 @@ class OpenModal extends React.Component {
     })
   }
 
-  onOpenUrl = (url) => {
+  onSubmitUrl = (e) => {
+    e.preventDefault();
     this.onStyleSelect(this.state.styleUrl);
   }
 
@@ -209,22 +210,25 @@ class OpenModal extends React.Component {
             <p>
               Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
             </p>
-            <UrlInput
+            <form onSubmit={this.onSubmitUrl}>
-              data-wd-key="open-modal.url.input"
+              <UrlInput
-              type="text"
+                data-wd-key="open-modal.url.input"
-              className="maputnik-input"
+                type="text"
-              default="Enter URL..."
+                className="maputnik-input"
-              value={this.state.styleUrl}
+                default="Enter URL..."
-              onInput={this.onChangeUrl}
+                value={this.state.styleUrl}
-            />
+                onInput={this.onChangeUrl}
-            <div>
+                onChange={this.onChangeUrl}
-              <Button
+              />
-                data-wd-key="open-modal.url.button"
+              <div>
-                className="maputnik-big-button"
+                <Button
-                onClick={this.onOpenUrl}
+                  data-wd-key="open-modal.url.button"
-                disabled={this.state.styleUrl.length < 1}
+                  type="submit"
-              >Open URL</Button>
+                  className="maputnik-big-button"
-            </div>
+                  disabled={this.state.styleUrl.length < 1}
+                >Open URL</Button>
+              </div>
+            </form>
           </section>
 
           <section className="maputnik-modal-section maputnik-modal-section--shrink">