fix(Popover): set AllowClickAway to false if trigger is Focus

momentum-design · Aug 27, 2019 · bd544fd · bd544fd
1 parent 4798af5
commit bd544fd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/react/src/app/containers/EventOverlay/EventOverlayExamples.js b/react/src/app/containers/EventOverlay/EventOverlayExamples.js
@@ -340,6 +340,37 @@ class EOPlaygroundComponent extends React.Component {
           </React.Fragment>
         )}
 
+        <div className="docs-example docs-example--spacing">
+          <h5>Input with Popover</h5>
+          <Popover
+            boundingParentID={boundingParentID}
+            checkOverflow={checkOverflow}
+            content={simpleDiv}
+            direction={direction}
+            isContained={isContained}
+            scrollParentID={scrollParentID}
+            popoverTrigger="Focus"
+            {...portalNode 
+              && document.getElementById(portalNode)
+              && { portalNode: document.getElementById(portalNode) }
+            }
+            showArrow={showArrow}
+            targetOffset={targetOffset}
+          >
+            <Input 
+              name='testPopover'
+              label='Popover surrounding Input'
+              htmlId='testPopover'
+              placeholder='Popover surrounding Input'
+              clear
+            />
+          </Popover>
+        </div>
+
+        <div
+          style={{ width: '100%', border: '10px gray solid', margin: '20px 0' }}
+        />
+
         <div
           className="docs-example docs-example--spacing"
           style={{ marginTop: '10px' }}

diff --git a/react/src/lib/Popover/index.js b/react/src/lib/Popover/index.js
@@ -246,6 +246,7 @@ class Popover extends React.Component {
                 );
               }}
             }
+            {...popoverTrigger === 'Focus' && { allowClickAway: false }}
             {...otherProps}
           >
             {content}