Merge pull request #64 from dbeaver/fix-properties-table

fix(core): properties table value select menu

webapp/packages/core/src/blocks/PropertiesTable/PropertyItem.tsx

@@ -8,7 +8,7 @@
 
 import { observer } from 'mobx-react';
 import {
-  useCallback, useEffect, useRef, useState,
+  useCallback, useRef, useState, useLayoutEffect
 } from 'react';
 import styled, { css, use } from 'reshadow';
 
@@ -16,8 +16,8 @@ import { composes, useStyles } from '@dbeaver/core/theming';
 
 import { Icon } from '../Icons';
 import { ShadowInput } from '../ShadowInput';
-import { DriverPropertyValueSelector } from './DriverPropertyValueSelector';
 import { IProperty } from './IProperty';
+import { PropertyValueSelector } from './PropertyValueSelector';
 
 const styles = composes(
   css`
@@ -133,7 +133,7 @@ export const PropertyItem = observer(function PropertyItem({
   );
   const handleRemove = useCallback(() => onRemove(property.id), [property]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (keyInputRef.current && isKeyEditable) {
       keyInputRef.current.focus();
     }
@@ -166,14 +166,14 @@ export const PropertyItem = observer(function PropertyItem({
       </property-value>
       {(property.validValues && property.validValues.length > 0) && (
         <property-select as="div">
-          <DriverPropertyValueSelector
+          <PropertyValueSelector
             propertyName={property.id}
             values={property.validValues}
             onSelect={handleValueChange}
             onSwitch={setFocus}
           >
             <Icon name="arrow" viewBox="0 0 16 16" {...use({ focus })} />
-          </DriverPropertyValueSelector>
+          </PropertyValueSelector>
         </property-select>
       )}
       {isKeyEditable && (

webapp/packages/core/src/blocks/PropertiesTable/PropertyValueSelector.tsx

@@ -6,7 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { useCallback, useEffect } from 'react';
+import { observer } from 'mobx-react';
+import { useCallback, useLayoutEffect } from 'react';
 import {
   useMenuState,
   Menu,
@@ -42,6 +43,7 @@ const styles = composes(
       width: 420px;
       outline: none;
       padding: 4px 0;
+      z-index: 999;
 
       & MenuItem {
         background: transparent;
@@ -56,20 +58,20 @@ const styles = composes(
   `
 );
 
-type DriverPropertyValueSelectorProps = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
   propertyName?: string;
   values: string[];
   onSelect(value: string): void;
   onSwitch(state: boolean): void;
 }>
 
-export function DriverPropertyValueSelector({
+export const PropertyValueSelector = observer(function PropertyValueSelector({
   propertyName,
   values,
   children,
   onSelect,
   onSwitch,
-}: DriverPropertyValueSelectorProps) {
+}: Props) {
   const menu = useMenuState();
   const handleMenuSelect = useCallback(
     (value: string) => {
@@ -78,7 +80,7 @@ export function DriverPropertyValueSelector({
     },
     [menu, onSelect]
   );
-  useEffect(() => onSwitch(menu.visible), [menu.visible]);
+  useLayoutEffect(() => onSwitch(menu.visible), [menu.visible]);
 
   return styled(useStyles(styles))(
     <>
@@ -94,4 +96,4 @@ export function DriverPropertyValueSelector({
       </Portal>
     </>
   );
-}
+});

webapp/packages/core/src/dialogs/CommonDialog/DialogsPortal.tsx

@@ -7,7 +7,7 @@
  */
 
 import { observer } from 'mobx-react';
-import { useCallback } from 'react';
+import { useCallback, useRef, useLayoutEffect } from 'react';
 import {
   Dialog,
   DialogBackdrop,
@@ -58,6 +58,7 @@ type NestedDialogType = {
 function NestedDialog(props: NestedDialogType) {
   const dialogState = useDialogState();
   const styles = useStyles(dialogStyles);
+  const refToDialog = useRef<any>();
   dialogState.visible = props.visible;
   const handleReject = useCallback(() => props.rejectDialog(props.dialog), [props.dialog, props.rejectDialog]);
   const handleResolve = useCallback(
@@ -71,12 +72,15 @@ function NestedDialog(props: NestedDialogType) {
   }, [props.dialog.options?.persistent, handleReject]);
 
   const DialogComponent = props.dialog.component;
+  useLayoutEffect(() => {
+    refToDialog.current?.removeAttribute('tabIndex');
+  }, [refToDialog.current]);
 
   // TODO: place Dialog inside CommonDialogWrapper, so we can pass aria-label
   return styled(styles)(
     <>
       <Portal><DialogBackdrop {...dialogState} onClick={backdropClickCallback} /></Portal>
-      <Dialog {...dialogState} aria-label="can't be provided" tabIndex={0} >
+      <Dialog {...dialogState} ref={refToDialog} aria-label="can't be provided">
         <DialogComponent
           payload={props.dialog.payload}
           options={props.dialog.options}