fix: InputGroup validation changes (#1260)

BREAKING CHANGE

* fix: focus lost after validation changes

* fix: duplicate popper in SearchInput

* fix: storyshots

* fix: search input validation props

* fix: tests

* fix: tests, refactor searchinput props

Author: jacobdevera

src/ComboboxInput/ComboboxInput.test.js

@@ -54,7 +54,7 @@ describe('<ComboboxInput />', () => {
             );
 
             expect(
-                element.find('div.fd-popover').getDOMNode().attributes['data-sample'].value
+                element.find('div.fd-popover').first().getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 

src/ComboboxInput/__stories__/__snapshots__/ComboboxInput.stories.storyshot

@@ -535,7 +535,7 @@ describe('<DatePicker />', () => {
             const element = mount(<DatePicker inputGroupProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
-                element.find('InputGroup').at(1).getDOMNode().attributes['data-sample'].value
+                element.find('.fd-input-group').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 

src/DatePicker/DatePicker.test.js

@@ -32,9 +32,7 @@ const FormValidationOverlay = React.forwardRef((
     };
 
     const _handleFocus = () => {
-        if (validationState?.text?.length > 0) {
-            setShowValidationMessage(true);
-        }
+        setShowValidationMessage(true);
     };
 
     const popoverClasses = classnames(`${cssNamespace}-popover`, className);
@@ -62,7 +60,7 @@ const FormValidationOverlay = React.forwardRef((
                 popperProps={popperProps}
                 referenceClassName={referenceClasses}
                 referenceComponent={referenceComponent}
-                show={showValidationMessage}
+                show={showValidationMessage && validationState?.text?.length > 0}
                 usePortal>
                 {bodyContent}
             </Popper>

src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot

@@ -63,7 +63,8 @@ describe('<FormValidationOverlay />', () => {
             await act(async() => {
                 setup({
                     popperClassName: 'wonderful-styles',
-                    show: true
+                    show: true,
+                    validationState: { state: 'error', text: 'test message' }
                 });
             });
             const popoverNode = getPopover();
@@ -77,8 +78,8 @@ describe('<FormValidationOverlay />', () => {
             await act(async() => {
                 element = setup({
                     formMessageProps: { 'data-sample': 'Sample' },
-                    validationState: { state: 'error', message: 'test message' },
-                    show: true
+                    show: true,
+                    validationState: { state: 'error', text: 'test message' }
                 });
             });
 
@@ -92,7 +93,7 @@ describe('<FormValidationOverlay />', () => {
         test('Should show popover when trigger receives focus & hide popover when trigger loses focus (i.e. blurs)', async() => {
             let element = setup({
                 formMessageProps: { 'data-sample': 'Sample' },
-                validationState: { state: 'error', message: 'test message' }
+                validationState: { state: 'error', text: 'test message' }
             });
             await act(async() => {
                 element.find('input').simulate('focus');

src/Forms/_FormValidationOverlay.js

@@ -16,26 +16,42 @@ exports[`Storyshots Component API/Forms/FormGroup No Styles 1`] = `
       className="xxx-form-item"
     >
       <div
-        className="xxx-input-group"
+        className="xxx-popover"
+        onBlur={[Function]}
+        onFocus={[Function]}
       >
-        <span
-          className="xxx-input-group__addon xxx-input-group__addon--button"
+        <div
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
         >
-          <button
-            className="xxx-button xxx-button--transparent xxx-input-group__button"
-            type="button"
+          <div
+            className="xxx-popover__control"
           >
-            <i
-              aria-hidden={true}
-              className="sap-icon--accept"
-              role="img"
-            />
-          </button>
-        </span>
-        <input
-          className="xxx-input xxx-input-group__input"
-          type="text"
-        />
+            <div
+              className="xxx-input-group"
+            >
+              <span
+                className="xxx-input-group__addon xxx-input-group__addon--button"
+              >
+                <button
+                  className="xxx-button xxx-button--transparent xxx-input-group__button"
+                  type="button"
+                >
+                  <i
+                    aria-hidden={true}
+                    className="sap-icon--accept"
+                    role="img"
+                  />
+                </button>
+              </span>
+              <input
+                className="xxx-input xxx-input-group__input"
+                type="text"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -58,26 +74,42 @@ exports[`Storyshots Component API/Forms/FormGroup Primary 1`] = `
       className="fd-form-item"
     >
       <div
-        className="fd-input-group"
+        className="fd-popover"
+        onBlur={[Function]}
+        onFocus={[Function]}
       >
-        <span
-          className="fd-input-group__addon fd-input-group__addon--button"
+        <div
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
         >
-          <button
-            className="fd-button fd-button--transparent fd-input-group__button"
-            type="button"
+          <div
+            className="fd-popover__control"
           >
-            <i
-              aria-hidden={true}
-              className="sap-icon--accept"
-              role="img"
-            />
-          </button>
-        </span>
-        <input
-          className="fd-input fd-input-group__input"
-          type="text"
-        />
+            <div
+              className="fd-input-group"
+            >
+              <span
+                className="fd-input-group__addon fd-input-group__addon--button"
+              >
+                <button
+                  className="fd-button fd-button--transparent fd-input-group__button"
+                  type="button"
+                >
+                  <i
+                    aria-hidden={true}
+                    className="sap-icon--accept"
+                    role="img"
+                  />
+                </button>
+              </span>
+              <input
+                className="fd-input fd-input-group__input"
+                type="text"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

src/Forms/_FormValidationOverlay.test.js

@@ -67,12 +67,12 @@ class InputGroup extends Component {
             </div>
         );
 
-        return validationState?.state ? (
+        return (
             <FormValidationOverlay
                 {...validationOverlayProps}
                 control={inputGroup}
                 validationState={validationState} />
-        ) : inputGroup;
+        );
     }
 }
 

src/Forms/__stories__/__snapshots__/FormGroup.stories.storyshot

@@ -30,7 +30,7 @@ describe('<InputGroup />', () => {
 
         it('should have a default class of "fd-input-group"', () => {
             expect(
-                element.getDOMNode().className
+                element.find('.fd-popover__control').childAt(0).getDOMNode().className
             ).toContain('fd-input-group');
         });
     });
@@ -42,7 +42,7 @@ describe('<InputGroup />', () => {
             });
 
             expect(
-                element.getDOMNode().attributes['data-sample'].value
+                element.find('.fd-popover__control').childAt(0).getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });