MC-2343: Safari & Firefox Issues With Grid Size Form

- Resolve issue with selection of input in Safari
- Add validation for non numeric values

Author: davemacaulay

app/code/Magento/PageBuilder/Test/Mftf/Data/ColumnData.xml

@@ -186,6 +186,7 @@
         <data key="invalidDefaultGridSizeErrorMessage">Default grid size must be less than the maximum grid size.</data>
         <data key="invalidDigitErrorMessage">Please enter a valid number in this field.</data>
         <data key="greaterThanOneErrorMessage">Please enter a number 2 or greater in this field.</data>
+        <data key="invalidNumberErrorMessage">Please enter a valid number.</data>
         <data key="minimumGridSizeErrorMessage">The minimum grid size supported is 2.</data>
         <data key="maximumGridSizeErrorMessage">The maximum grid size supported is</data>
         <data key="smallerThanTotalColumnsErrorMessage">Grid size cannot be smaller than the current total amount of columns, minus any empty columns.</data>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderColumnGridTest.xml

@@ -623,6 +623,14 @@
             <argument name="index" value="1"/>
             <argument name="errorMessage" value="PageBuilderGridSize.minimumGridSizeErrorMessage"/>
         </actionGroup>
+        <!-- Check validation occurs when entering as text -->
+        <comment userInput="Check validation occurs when entering as text" stepKey="commentValidateStringInput"/>
+        <executeJS function="document.evaluate(&quot;{{PageBuilderColumnSection.gridSizeInput('1')}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.setAttribute('type', 'text')" stepKey="changeInputToText" />
+        <actionGroup ref="updateGridSizeInvalid" stepKey="enterInvalidGridSizeString">
+            <argument name="gridSize" value="InvalidString"/>
+            <argument name="index" value="1"/>
+            <argument name="errorMessage" value="PageBuilderGridSize.invalidNumberErrorMessage"/>
+        </actionGroup>
     </test>
     <test name="ValidateDifferentGridSizePerGroup">
         <annotations>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-group/_default.less

@@ -126,8 +126,6 @@
                 visibility: visible;
             }
 
-            .no-user-select;
-
             .pagebuilder-options {
                 display: none;
             }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-group/preview.js

@@ -5,6 +5,7 @@
 
 import $ from "jquery";
 import ko from "knockout";
+import $t from "mage/translate";
 import events from "uiEvents";
 import _ from "underscore";
 import Config from "../../config";
@@ -382,6 +383,10 @@ export default class Preview extends PreviewCollection {
      * Update the grid size on enter or blur of the input
      */
     public updateGridSize() {
+        if (!$.isNumeric(this.gridSizeInput())) {
+            this.gridSizeError($t("Please enter a valid number."));
+        }
+
         const newGridSize = parseInt(this.gridSizeInput().toString(), 10);
         if (newGridSize || newGridSize === 0) {
             if (newGridSize !== this.resizeUtils.getGridSize()) {