diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx index d5bfd6025..cdb74e580 100644 --- a/app/soapbox/components/scrollable_list.tsx +++ b/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(({ {isLoading ? ( ) : ( - {emptyMessage} + emptyMessage )} diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx index 3398d8df2..18796baaa 100644 --- a/app/soapbox/components/ui/stack/stack.tsx +++ b/app/soapbox/components/ui/stack/stack.tsx @@ -37,12 +37,13 @@ interface IStack extends React.HTMLAttributes { } /** Vertical stack of child elements. */ -const Stack: React.FC = (props) => { +const Stack: React.FC = React.forwardRef((props, ref: React.LegacyRef | undefined) => { const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props; return (
= (props) => { }, className)} /> ); -}; +}); export default Stack; diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx index 9c1aab765..ec7c89468 100644 --- a/app/soapbox/features/compose/components/search.tsx +++ b/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 (
- + {autosuggest ? ( + + ) : ( + + )}
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 }; \ No newline at end of file diff --git a/app/soapbox/hooks/__tests__/useDimensions.test.ts b/app/soapbox/hooks/__tests__/useDimensions.test.ts index 78524ad77..4e97fdef3 100644 --- a/app/soapbox/hooks/__tests__/useDimensions.test.ts +++ b/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); }); }); diff --git a/app/soapbox/hooks/useDimensions.ts b/app/soapbox/hooks/useDimensions.ts index 2a265c4a6..bf7fc78b8 100644 --- a/app/soapbox/hooks/useDimensions.ts +++ b/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 }); diff --git a/package.json b/package.json index d5647cdec..eef743978 100644 --- a/package.json +++ b/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",