Merge pull request #3074 from Bilb/fix-focustrap-default-button

fix: focustrap when no buttons are mounted right away

preload.js

@@ -29,7 +29,7 @@ window.getNodeVersion = () => configAny.node_version;
 
 window.sessionFeatureFlags = {
   useOnionRequests: true,
-  useTestNet: isTestNet(),
+  useTestNet: isTestNet() || isTestIntegration(),
   integrationTestEnv: isTestIntegration(),
   useClosedGroupV3: false,
   debug: {

stylesheets/_session_constants.scss

@@ -153,7 +153,6 @@ $session-margin-md: 15px;
 $session-margin-lg: 20px;
 
 // Animations
-$session-transition-duration: 0.25s;
 
 @keyframes fadein {
   from {

stylesheets/_session_slider.scss

@@ -172,13 +172,13 @@
 }
 .rc-slider-tooltip-zoom-down-enter,
 .rc-slider-tooltip-zoom-down-appear {
-  animation-duration: 0.3s;
+  animation-duration: var(--default-duration);
   animation-fill-mode: both;
   display: block !important;
   animation-play-state: paused;
 }
 .rc-slider-tooltip-zoom-down-leave {
-  animation-duration: 0.3s;
+  animation-duration: var(--default-duration);
   animation-fill-mode: both;
   display: block !important;
   animation-play-state: paused;

ts/components/SessionFocusTrap.tsx

@@ -0,0 +1,21 @@
+import FocusTrap from 'focus-trap-react';
+import React, { useState } from 'react';
+import { useMount } from 'react-use';
+
+/**
+ * Focus trap which activates on mount.
+ */
+export function SessionFocusTrap(props: { children: React.ReactNode }) {
+  const [active, setActive] = useState(false);
+
+  // Activate the trap on mount so we **should** have a button to tab through. focus-trap-react will throw if we don't have a button when the trap becomes active.
+  // We might still have an issue for dialogs which have buttons added with a useEffect, or asynchronously but have no buttons on mount.
+  // If that happens we will need to force those dialogs to have at least one button so focus-trap-react does not throw.
+  useMount(() => setActive(true));
+
+  return (
+    <FocusTrap active={active} focusTrapOptions={{ initialFocus: false, allowOutsideClick: true }}>
+      {props.children}
+    </FocusTrap>
+  );
+}

ts/components/SessionWrapperModal.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
-import FocusTrap from 'focus-trap-react';
 import React, { useRef } from 'react';
 import useKey from 'react-use/lib/useKey';
 
 import { SessionIconButton } from './icon';
 
 import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
+import { SessionFocusTrap } from './SessionFocusTrap';
 
 export type SessionWrapperModalType = {
   title?: string;
@@ -17,7 +17,7 @@ export type SessionWrapperModalType = {
   cancelText?: string;
   showExitIcon?: boolean;
   headerIconButtons?: Array<any>;
-  children: any;
+  children: React.ReactNode;
   headerReverse?: boolean;
   additionalClassName?: string;
 };
@@ -64,7 +64,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
   };
 
   return (
-    <FocusTrap focusTrapOptions={{ initialFocus: false, allowOutsideClick: true }}>
+    <SessionFocusTrap>
       <div
         className={classNames('loki-dialog modal', additionalClassName || null)}
         onClick={handleClick}
@@ -128,6 +128,6 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
           </div>
         </div>
       </div>
-    </FocusTrap>
+    </SessionFocusTrap>
   );
 };

ts/components/calling/CallButtons.tsx

@@ -355,7 +355,7 @@ const StyledCallWindowControls = styled.div<{ isFullScreen: boolean; makeVisible
   margin-right: auto;
   left: 0;
   right: 0;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--default-duration) ease-in-out;
 
   display: flex;
   justify-content: center;

ts/components/conversation/composition/UserMentions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SuggestionDataItem } from 'react-mentions';
-import { MemberListItem } from '../../MemberListItem';
 import { HTMLDirection } from '../../../util/i18n';
+import { MemberListItem } from '../../MemberListItem';
 
 const listRTLStyle = { position: 'absolute', bottom: '0px', right: '100%' };
 
@@ -21,7 +21,7 @@ export const styleForCompositionBoxSuggestions = (dir: HTMLDirection = 'ltr') =>
         paddingBottom: '5px',
         backgroundColor: 'var(--suggestions-background-color)',
         color: 'var(--suggestions-text-color)',
-        transition: '0.25s',
+        transition: 'var(--default-duration)',
 
         '&focused': {
           backgroundColor: 'var(--suggestions-background-hover-color)',

ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx

@@ -1,5 +1,5 @@
-import FocusTrap from 'focus-trap-react';
 import React from 'react';
+
 import { useDispatch, useSelector } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
 
@@ -17,6 +17,7 @@ import {
   SessionButtonType,
 } from '../../basic/SessionButton';
 import { SessionIconButton } from '../../icon';
+import { SessionFocusTrap } from '../../SessionFocusTrap';
 
 export const SelectionOverlay = () => {
   const selectedMessageIds = useSelector(getSelectedMessageIds);
@@ -69,7 +70,7 @@ export const SelectionOverlay = () => {
   const classNameAndId = 'message-selection-overlay';
 
   return (
-    <FocusTrap focusTrapOptions={{ initialFocus: false, allowOutsideClick: true }}>
+    <SessionFocusTrap>
       <div className={classNameAndId} id={classNameAndId}>
         <div className="close-button">
           <SessionIconButton iconType="exit" iconSize="medium" onClick={onCloseOverlay} />
@@ -93,6 +94,6 @@ export const SelectionOverlay = () => {
           />
         </div>
       </div>
-    </FocusTrap>
+    </SessionFocusTrap>
   );
 };

ts/components/conversation/right-panel/RightPanel.tsx

@@ -13,7 +13,7 @@ export const StyledRightPanelContainer = styled.div`
   height: var(--right-panel-height);
   right: 0vw;
 
-  transition: transform 0.3s ease-in-out;
+  transition: transform var(--default-duration) ease-in-out;
   transform: translateX(100%);
   will-change: transform;
   width: var(--right-panel-width);
@@ -25,7 +25,7 @@ export const StyledRightPanelContainer = styled.div`
 
   &.show {
     transform: none;
-    transition: transform 0.3s ease-in-out;
+    transition: transform var(--default-duration) ease-in-out;
     z-index: 3;
     visibility: visible;
   }

ts/components/dialog/SessionSeedModal.tsx

@@ -62,6 +62,7 @@ const Password = (props: PasswordProps) => {
         <input
           type="password"
           id="seed-input-password"
+          data-testid="password-input"
           placeholder={i18n('enterPassword')}
           onKeyUp={onEnter}
         />
@@ -77,12 +78,14 @@ const Password = (props: PasswordProps) => {
           text={i18n('done')}
           buttonType={SessionButtonType.Simple}
           onClick={confirmPassword}
+          dataTestId="session-confirm-ok-button"
         />
         <SessionButton
           text={i18n('cancel')}
           buttonType={SessionButtonType.Simple}
           buttonColor={SessionButtonColor.Danger}
           onClick={onClose}
+          dataTestId="session-confirm-cancel-button"
         />
       </div>
     </>

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -28,7 +28,7 @@ const StyledProgressBarContainer = styled.div`
 const StyledProgressBarInner = styled.div`
   background: var(--primary-color);
   width: 90%;
-  transition: width 0.5s ease-in;
+  transition: width var(--default-duration) ease-in;
   height: 100%;
 `;
 

ts/components/leftpane/MessageRequestsBanner.tsx

@@ -4,10 +4,10 @@ import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { getUnreadConversationRequests } from '../../state/selectors/conversations';
+import { isSearching } from '../../state/selectors/search';
 import { getHideMessageRequestBanner } from '../../state/selectors/userConfig';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { MessageRequestBannerContextMenu } from '../menu/MessageRequestBannerContextMenu';
-import { isSearching } from '../../state/selectors/search';
 
 const StyledMessageRequestBanner = styled.div`
   height: 64px;
@@ -137,6 +137,6 @@ export const MessageRequestsBanner = (props: { handleOnClick: () => any }) => {
   );
 };
 
-const Portal = ({ children }: { children: any }) => {
+const Portal = ({ children }: { children: React.ReactNode }) => {
   return createPortal(children, document.querySelector('.inbox.index') as Element);
 };

ts/components/leftpane/conversation-list-item/ConversationListItem.tsx

@@ -34,7 +34,7 @@ type PropsHousekeeping = {
 
 type Props = { conversationId: string } & PropsHousekeeping;
 
-const Portal = ({ children }: { children: any }) => {
+const Portal = ({ children }: { children: React.ReactNode }) => {
   return createPortal(children, document.querySelector('.inbox.index') as Element);
 };
 

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -14,7 +14,7 @@ const StyledActionRow = styled.button`
   display: flex;
   align-items: center;
   border-bottom: 1px var(--border-color) solid;
-  transition-duration: 0.25s;
+  transition-duration: var(--default-duration);
   width: 100%;
 
   &:first-child {

ts/mains/main_node.ts

@@ -428,7 +428,7 @@ async function createWindow() {
     }, 5000);
   }
 
-  if (isDevProd()) {
+  if (isDevProd() && !isTestIntegration()) {
     // Open the DevTools.
     mainWindow.webContents.openDevTools({
       mode: 'bottom',

ts/themes/SessionTheme.tsx

@@ -1,10 +1,10 @@
 import { ipcRenderer } from 'electron';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
-import { switchThemeTo } from './switchTheme';
-import { classicDark } from './classicDark';
 import { getOppositeTheme, isThemeMismatched } from '../util/theme';
-import { declareCSSVariables, THEME_GLOBALS } from './globals';
+import { classicDark } from './classicDark';
+import { THEME_GLOBALS, declareCSSVariables } from './globals';
+import { switchThemeTo } from './switchTheme';
 
 // Defaults to Classic Dark theme
 const SessionGlobalStyles = createGlobalStyle`
@@ -14,7 +14,7 @@ const SessionGlobalStyles = createGlobalStyle`
   };
 `;
 
-export const SessionTheme = ({ children }: { children: any }) => (
+export const SessionTheme = ({ children }: { children: React.ReactNode }) => (
   <>
     <SessionGlobalStyles />
     {children}

ts/themes/globals.tsx

@@ -1,3 +1,4 @@
+import { isTestIntegration } from '../shared/env_vars';
 import { hexColorToRGB } from '../util/hexColorToRGB';
 import { COLORS } from './constants/colors';
 
@@ -126,7 +127,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--composition-container-height': '60px',
   '--search-input-height': '34px',
 
-  '--default-duration': '0.25s',
+  '--default-duration': isTestIntegration() ? '0s' : '0.25s',
 
   '--green-color': COLORS.PRIMARY.GREEN,
   '--blue-color': COLORS.PRIMARY.BLUE,