set repository name suggestion in import form just at leaving the input field

scm-ui/ui-components/src/forms/InputField.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent, KeyboardEvent } from "react";
+import React, { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
 import classNames from "classnames";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
 import { createAttributesForTesting } from "../devBuild";
@@ -41,6 +41,7 @@ type Props = {
   helpText?: string;
   className?: string;
   testId?: string;
+  onBlur?: (value: string, name?: string) => void;
 };
 
 class InputField extends React.Component<Props> {
@@ -61,6 +62,12 @@ class InputField extends React.Component<Props> {
     this.props.onChange(event.target.value, this.props.name);
   };
 
+  handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (this.props.onBlur) {
+      this.props.onBlur(event.target.value, this.props.name);
+    }
+  };
+
   handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
     const onReturnPressed = this.props.onReturnPressed;
     if (!onReturnPressed) {
@@ -102,6 +109,7 @@ class InputField extends React.Component<Props> {
             onChange={this.handleInput}
             onKeyPress={this.handleKeyPress}
             disabled={disabled}
+            onBlur={this.handleBlur}
             {...createAttributesForTesting(testId)}
           />
         </div>

scm-ui/ui-webapp/src/repos/components/ImportFromUrlForm.tsx

@@ -48,19 +48,20 @@ const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled
   const [urlValidationError, setUrlValidationError] = useState(false);
 
   const handleImportUrlChange = (importUrl: string) => {
-    const changedRepo = { ...repository, importUrl };
+    onChange({ ...repository, importUrl });
+    const valid = validation.isUrlValid(importUrl);
+    setUrlValidationError(!valid);
+    setValid(valid);
+  };
 
+  const handleImportUrlBlur = (importUrl: string) => {
     if (!repository.name) {
       // If the repository name is not fill we set a name suggestion
       const match = importUrl.match(/([^\/]+?)(?:.git)?$/);
       if (match && match[1]) {
-        changedRepo.name = match[1];
+        onChange({ ...repository, name: match[1] });
       }
     }
-    onChange(changedRepo);
-    const valid = validation.isUrlValid(importUrl);
-    setUrlValidationError(!valid);
-    setValid(valid);
   };
 
   return (
@@ -74,6 +75,7 @@ const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled
           validationError={urlValidationError}
           errorMessage={t("validation.url-invalid")}
           disabled={disabled}
+          onBlur={handleImportUrlBlur}
         />
       </Column>
       <Column className="column is-half">