Merge branch 'bug-fixes' into 'develop'

Bug fixes

See merge request soapbox-pub/soapbox!1761

app/soapbox/components/scrollable_list.tsx

@@ -6,7 +6,7 @@ import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLo
 import { useSettings } from 'soapbox/hooks';
 
 import LoadMore from './load_more';
-import { Card, Spinner, Text } from './ui';
+import { Card, Spinner } from './ui';
 
 /** Custom Viruoso component context. */
 type Context = {
@@ -162,7 +162,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
           {isLoading ? (
             <Spinner />
           ) : (
-            <Text>{emptyMessage}</Text>
+            emptyMessage
           )}
         </Card>
       </div>

app/soapbox/components/ui/stack/stack.tsx

@@ -37,12 +37,13 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /** Vertical stack of child elements. */
-const Stack: React.FC<IStack> = (props) => {
+const Stack: React.FC<IStack> = React.forwardRef((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
   const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props;
 
   return (
     <div
       {...filteredProps}
+      ref={ref}
       className={classNames('flex flex-col', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
@@ -54,6 +55,6 @@ const Stack: React.FC<IStack> = (props) => {
       }, className)}
     />
   );
-};
+});
 
 export default Stack;

app/soapbox/features/compose/components/search.tsx

@@ -115,27 +115,34 @@ const Search = (props: ISearch) => {
   ];
 
   const hasValue = value.length > 0 || submitted;
-  const Component = autosuggest ? AutosuggestAccountInput : 'input';
+  const componentProps: any = {
+    className: 'block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm',
+    type: 'text',
+    id: 'search',
+    placeholder: intl.formatMessage(messages.placeholder),
+    value,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    autoFocus: autoFocus,
+  };
+
+  if (autosuggest) {
+    componentProps.onSelected = handleSelected;
+    componentProps.menu = makeMenu();
+    componentProps.autoSelect = false;
+  }
 
   return (
     <div className='w-full'>
       <label htmlFor='search' className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
 
       <div className='relative'>
-        <Component
+        {autosuggest ? (
-          className='block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm'
+          <AutosuggestAccountInput {...componentProps} />
-          type='text'
+        ) : (
-          id='search'
+          <input {...componentProps} />
-          placeholder={intl.formatMessage(messages.placeholder)}
+        )}
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onSelected={handleSelected}
-          autoFocus={autoFocus}
-          autoSelect={false}
-          menu={makeMenu()}
-        />
 
         <div
           role='button'

app/soapbox/hooks/__mocks__/resize-observer.ts

@@ -0,0 +1,25 @@
+let listener: ((rect: any) => void) | undefined = undefined;
+const mockDisconnect = jest.fn();
+
+class ResizeObserver {
+
+  constructor(ls: any) {
+    listener = ls;
+  }
+
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    mockDisconnect();
+  }
+
+}
+
+// eslint-disable-next-line compat/compat
+(window as any).ResizeObserver = ResizeObserver;
+
+export { ResizeObserver as default, listener, mockDisconnect };

app/soapbox/hooks/__tests__/useDimensions.test.ts

@@ -1,21 +1,13 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 
+import { listener, mockDisconnect } from '../__mocks__/resize-observer';
 import { useDimensions } from '../useDimensions';
 
-let listener: ((rect: any) => void) | undefined = undefined;
-
-(window as any).ResizeObserver = class ResizeObserver {
-
-  constructor(ls: any) {
-    listener = ls;
-  }
-
-  observe() {}
-  disconnect() {}
-
-};
-
 describe('useDimensions()', () => {
+  beforeEach(() => {
+    mockDisconnect.mockClear();
+  });
+
   it('defaults to 0', () => {
     const { result } = renderHook(() => useDimensions());
 
@@ -56,16 +48,6 @@ describe('useDimensions()', () => {
   });
 
   it('disconnects on unmount', () => {
-    const disconnect = jest.fn();
-    (window as any).ResizeObserver = class ResizeObserver {
-
-      observe() {}
-      disconnect() {
-        disconnect();
-      }
-
-    };
-
     const { result, unmount } = renderHook(() => useDimensions());
 
     act(() => {
@@ -73,8 +55,8 @@ describe('useDimensions()', () => {
       (result.current[1] as any)(div);
     });
 
-    expect(disconnect).toHaveBeenCalledTimes(0);
+    expect(mockDisconnect).toHaveBeenCalledTimes(0);
     unmount();
-    expect(disconnect).toHaveBeenCalledTimes(1);
+    expect(mockDisconnect).toHaveBeenCalledTimes(1);
   });
 });

app/soapbox/hooks/useDimensions.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 
 type UseDimensionsRect = { width: number, height: number };
 type UseDimensionsResult = [Element | null, any, any]
@@ -14,7 +15,7 @@ const useDimensions = (): UseDimensionsResult => {
 
   const observer = useMemo(
     () =>
-      new (window as any).ResizeObserver((entries: any) => {
+      new ResizeObserver((entries: any) => {
         if (entries[0]) {
           const { width, height } = entries[0].contentRect;
           setRect({ width, height });

package.json

@@ -181,6 +181,7 @@
     "redux-thunk": "^2.2.0",
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.20.3",
     "sass-loader": "^13.0.0",
     "semver": "^7.3.2",