Also validate on constructor

src/components/inputs/UrlInput.jsx

@@ -3,6 +3,34 @@ import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import SmallError from '../util/SmallError'
 
+
+function validate (url) {
+  let error;
+  const getProtocol = (url) => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.protocol;
+    }
+    catch (err) {
+      return undefined;
+    }
+  };
+  const protocol = getProtocol(url);
+  if (
+    protocol &&
+    protocol === "http:" &&
+    window.location.protocol === "https:"
+  ) {
+    error = (
+      <SmallError>
+        CORs policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+      </SmallError>
+    );
+  }
+
+  return error;
+}
+
 class UrlInput extends React.Component {
   static propTypes = {
     "data-wd-key": PropTypes.string,
@@ -14,35 +42,17 @@ class UrlInput extends React.Component {
     required: PropTypes.bool,
   }
 
-  state = {
+  constructor (props) {
-    error: null,
+    super(props);
+    this.state = {
+      error: validate(props.value)
+    };
   }
 
   onInput = (url) => {
-    let error;
+    this.setState({
-    const getProtocol = (url) => {
+      error: validate(url)
-      try {
+    });
-        const urlObj = new URL(url);
-        return urlObj.protocol;
-      }
-      catch (err) {
-        return undefined;
-      }
-    };
-    const protocol = getProtocol(url);
-    if (
-      protocol &&
-      protocol === "http:" &&
-      window.location.protocol === "https:"
-    ) {
-      error = (
-        <SmallError>
-        CORs policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
-        </SmallError>
-      );
-    }
-
-    this.setState({error});
   }
 
   render () {