|
@@ -48,7 +48,32 @@ export function getSuggestionRenderer(Component: any, ComponentProps = {}) {
|
|
|
theme: 'transparent',
|
|
|
placement: 'top-start',
|
|
|
offset: [-10, -2],
|
|
|
- arrow: false
|
|
|
+ arrow: false,
|
|
|
+ popperOptions: {
|
|
|
+ strategy: 'fixed',
|
|
|
+ modifiers: [
|
|
|
+ {
|
|
|
+ name: 'preventOverflow',
|
|
|
+ options: {
|
|
|
+ boundary: 'viewport', // keep within the viewport
|
|
|
+ altAxis: true, // also prevent overflow on the cross axis (X)
|
|
|
+ tether: true,
|
|
|
+ padding: 8
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'flip',
|
|
|
+ options: {
|
|
|
+ boundary: 'viewport',
|
|
|
+ fallbackPlacements: ['top-end', 'bottom-start', 'bottom-end']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // Ensure transforms don’t cause layout widening in some browsers
|
|
|
+ { name: 'computeStyles', options: { adaptive: true } }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // Helps avoid accidental focus/hover “linking” from far away elements
|
|
|
+ interactiveBorder: 8
|
|
|
});
|
|
|
popup?.show();
|
|
|
},
|