chore(dropdown-like components): updated isFlipEnabled to true by def… (#8215)

* chore(dropdown-like components): updated isFlipEnabled to true by default

* Updated snapshots

* Updated failing integration test

* Updated conditional for adding static class

* Updated static logic based on Core updates

* Updated ContextSelector

Author: thatblindgeye

packages/react-core/src/components/ContextSelector/ContextSelector.tsx

@@ -95,7 +95,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     footer: null as React.ReactNode,
     isPlain: false,
     isText: false,
-    isFlipEnabled: false,
+    isFlipEnabled: true,
     removeFindDomNode: false
   };
   constructor(props: ContextSelectorProps) {
@@ -145,15 +145,10 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     const uniqueId = id || getUniqueId();
     const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
     const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
 
     const menuContainer = (
-      <div
-        className={css(styles.contextSelectorMenu)}
-        // This removes the `position: absolute`styling from the `.pf-c-context-selector__menu`
-        // allowing the menu to flip correctly
-        {...(isFlipEnabled && { style: { position: 'revert' } })}
-        id={uniqueId}
-      >
+      <div className={css(styles.contextSelectorMenu, isStatic && styles.modifiers.static)} id={uniqueId}>
         {isOpen && (
           <FocusTrap
             active={!disableFocusTrap}

packages/react-core/src/components/Dropdown/Dropdown.tsx

@@ -77,7 +77,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   alignments,
   contextProps,
   menuAppendTo = 'inline',
-  isFlipEnabled = false,
+  isFlipEnabled = true,
   removeFindDomNode = false,
   ...props
 }: DropdownProps) => (

packages/react-core/src/components/Dropdown/DropdownWithContext.tsx

@@ -30,7 +30,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
     onSelect: (): void => undefined,
     autoFocus: true,
     menuAppendTo: 'inline',
-    isFlipEnabled: false
+    isFlipEnabled: true
   };
 
   constructor(props: DropdownProps & OUIAProps) {
@@ -93,15 +93,14 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       renderedContent = React.Children.toArray(children);
     }
     const openedOnEnter = this.openedOnEnter;
+    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
     return (
       <DropdownContext.Consumer>
         {({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
           const BaseComponent = baseComponent as any;
           const menuContainer = (
             <DropdownMenu
-              // This removes the `position: absolute` styling from the `.pf-c-dropdown__menu`
-              // allowing the menu to flip correctly
-              {...(isFlipEnabled && { style: { position: 'revert', minWidth: 'min-content' } })}
+              className={css(isStatic && styles.modifiers.static)}
               setMenuComponentRef={this.setMenuComponentRef}
               component={component}
               isOpen={isOpen}

packages/react-core/src/components/Select/Select.tsx

@@ -266,7 +266,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isInputFilterPersisted: false,
     isCreateSelectOptionObject: false,
     shouldResetOnSelect: true,
-    isFlipEnabled: false,
+    isFlipEnabled: true,
     removeFindDomNode: false
   };
 
@@ -1258,11 +1258,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       }
     }
 
+    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
     const innerMenu = (
       <SelectMenu
-        // This removes the `position: absolute` styling from the `.pf-c-select__menu`
-        // allowing the menu to flip correctly
-        {...(isFlipEnabled && { style: { position: 'revert' } })}
+        className={css(isStatic && styles.modifiers.static)}
         {...props}
         isGrouped={isGrouped}
         selected={selections}