[@mantine/core] Combobox: Fix dropdown not being positioned correctly when element is initially rendered outside the viewport (#8520, #8577)

Author: rtivital

packages/@mantine/core/src/components/Combobox/Combobox.tsx

@@ -169,7 +169,7 @@ export function Combobox(_props: ComboboxProps) {
     >
       <Popover
         opened={store.dropdownOpened}
-        preventPositionChangeWhenVisible
+        preventPositionChangeWhenVisible={false}
         {...others}
         onChange={(_opened) => !_opened && onDropdownClose()}
         withRoles={false}

packages/@mantine/core/src/components/Popover/use-popover.ts

@@ -104,7 +104,7 @@ function getPopoverMiddlewares(
           const styles = floating.refs.floating.current?.style ?? {};
 
           if (middlewaresOptions.size) {
-            //If custom apply function is given use that else set defaults
+            // If custom apply function is given use that else set defaults
             if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {
               middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });
             } else {

packages/@mantine/core/src/components/Select/Select.story.tsx

@@ -29,6 +29,30 @@ export function Usage() {
   );
 }
 
+export function BottomOfThePage() {
+  return (
+    <div style={{ padding: 40 }}>
+      <div style={{ height: 1200 }} />
+      <Select
+        data={[
+          'React',
+          'Angular',
+          'Svelte',
+          'Vue',
+          'Ember',
+          'Backbone',
+          'Preact',
+          'Inferno',
+          'Aurelia',
+          'Meteor',
+        ]}
+        placeholder="Select something"
+      />
+      <div style={{ height: 1200 }} />
+    </div>
+  );
+}
+
 export function ClearButtonWithRightSection() {
   const sizes = ['xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
     <Select