Merge pull request #4670 from matrix-org/t3chguy/autocomplete-scrollintoview

Autocomplete: use scrollIntoView for auto-scroll to fix it

src/autocomplete/CommunityProvider.tsx

@@ -90,11 +90,12 @@ export default class CommunityProvider extends AutocompleteProvider {
                 type: "community",
                 href: makeGroupPermalink(groupId),
                 component: (
-                    <PillCompletion initialComponent={
+                    <PillCompletion title={name} description={groupId}>
                         <BaseAvatar name={name || groupId}
-                                    width={24} height={24}
+                                    width={24}
+                                    height={24}
                                     url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 24, 24) : null} />
-                    } title={name} description={groupId} />
+                    </PillCompletion>
                 ),
                 range,
             }))

src/autocomplete/Components.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {forwardRef} from 'react';
 import classNames from 'classnames';
 
 /* These were earlier stateless functional components but had to be converted
@@ -30,50 +30,37 @@ interface ITextualCompletionProps {
     className?: string;
 }
 
-export class TextualCompletion extends React.PureComponent<ITextualCompletionProps> {
-    render() {
-        const {
-            title,
-            subtitle,
-            description,
-            className,
-            ...restProps
-        } = this.props;
-        return (
-            <div className={classNames('mx_Autocomplete_Completion_block', className)} role="option" {...restProps}>
-                <span className="mx_Autocomplete_Completion_title">{ title }</span>
-                <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
-                <span className="mx_Autocomplete_Completion_description">{ description }</span>
-            </div>
-        );
-    }
+export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props, ref) => {
+    const {title, subtitle, description, className, ...restProps} = props;
+    return (
+        <div {...restProps}
+             className={classNames('mx_Autocomplete_Completion_block', className)}
+             role="option"
+             ref={ref}
+        >
+            <span className="mx_Autocomplete_Completion_title">{ title }</span>
+            <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
+            <span className="mx_Autocomplete_Completion_description">{ description }</span>
+        </div>
+    );
+});
+
+interface IPillCompletionProps extends ITextualCompletionProps {
+    children?: React.ReactNode,
 }
 
-interface IPillCompletionProps {
-    title?: string;
-    subtitle?: string;
-    description?: string;
-    initialComponent?: React.ReactNode,
-    className?: string;
-}
-
-export class PillCompletion extends React.PureComponent<IPillCompletionProps> {
-    render() {
-        const {
-            title,
-            subtitle,
-            description,
-            initialComponent,
-            className,
-            ...restProps
-        } = this.props;
-        return (
-            <div className={classNames('mx_Autocomplete_Completion_pill', className)} role="option" {...restProps}>
-                { initialComponent }
-                <span className="mx_Autocomplete_Completion_title">{ title }</span>
-                <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
-                <span className="mx_Autocomplete_Completion_description">{ description }</span>
-            </div>
-        );
-    }
-}
+export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref) => {
+    const {title, subtitle, description, className, children, ...restProps} = props;
+    return (
+        <div {...restProps}
+             className={classNames('mx_Autocomplete_Completion_pill', className)}
+             role="option"
+             ref={ref}
+        >
+            { children }
+            <span className="mx_Autocomplete_Completion_title">{ title }</span>
+            <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
+            <span className="mx_Autocomplete_Completion_description">{ description }</span>
+        </div>
+    );
+});

src/autocomplete/EmojiProvider.tsx

@@ -121,9 +121,9 @@ export default class EmojiProvider extends AutocompleteProvider {
                 return {
                     completion: unicode,
                     component: (
-                        <PillCompletion title={shortname} aria-label={unicode} initialComponent={
+                        <PillCompletion title={shortname} aria-label={unicode}>
                             <span style={{maxWidth: '1em'}}>{ unicode }</span>
-                        } />
+                        </PillCompletion>
                     ),
                     range,
                 };

src/autocomplete/NotifProvider.tsx

@@ -48,7 +48,9 @@ export default class NotifProvider extends AutocompleteProvider {
                 type: "at-room",
                 suffix: ' ',
                 component: (
-                    <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={this.room} />} title="@room" description={_t("Notify the whole room")} />
+                    <PillCompletion title="@room" description={_t("Notify the whole room")}>
+                        <RoomAvatar width={24} height={24} room={this.room} />
+                    </PillCompletion>
                 ),
                 range,
             }];

src/autocomplete/RoomProvider.tsx

@@ -103,7 +103,9 @@ export default class RoomProvider extends AutocompleteProvider {
                     suffix: ' ',
                     href: makeRoomPermalink(room.displayedAlias),
                     component: (
-                        <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.room.name} description={room.displayedAlias} />
+                        <PillCompletion title={room.room.name} description={room.displayedAlias}>
+                            <RoomAvatar width={24} height={24} room={room.room} />
+                        </PillCompletion>
                     ),
                     range,
                 };

src/autocomplete/UserProvider.tsx

@@ -125,10 +125,9 @@ export default class UserProvider extends AutocompleteProvider {
                     suffix: (selection.beginning && range.start === 0) ? ': ' : ' ',
                     href: makeUserPermalink(user.userId),
                     component: (
-                        <PillCompletion
-                            initialComponent={<MemberAvatar member={user} width={24} height={24} />}
-                            title={displayName}
-                            description={user.userId} />
+                        <PillCompletion title={displayName} description={user.userId}>
+                            <MemberAvatar member={user} width={24} height={24} />
+                        </PillCompletion>
                     ),
                     range,
                 };

src/components/views/rooms/Autocomplete.tsx

@@ -15,8 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, {createRef} from 'react';
 import classNames from 'classnames';
 import flatMap from 'lodash/flatMap';
 import {ICompletion, ISelectionRange, IProviderCompletions} from '../../../autocomplete/Autocompleter';
@@ -54,7 +53,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     autocompleter: Autocompleter;
     queryRequested: string;
     debounceCompletionsRequest: NodeJS.Timeout;
-    containerRef: React.RefObject<HTMLDivElement>;
+    private containerRef = createRef<HTMLDivElement>();
 
     constructor(props) {
         super(props);
@@ -78,8 +77,6 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
 
             forceComplete: false,
         };
-
-        this.containerRef = React.createRef();
     }
 
     componentDidMount() {
@@ -256,14 +253,15 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     componentDidUpdate(prevProps: IProps) {
         this.applyNewProps(prevProps.query, prevProps.room);
         // this is the selected completion, so scroll it into view if needed
-        const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`];
-        if (selectedCompletion && this.containerRef.current) {
-            const domNode = ReactDOM.findDOMNode(selectedCompletion);
-            const offsetTop = domNode && (domNode as HTMLElement).offsetTop;
-            if (offsetTop > this.containerRef.current.scrollTop + this.containerRef.current.offsetHeight ||
-                offsetTop < this.containerRef.current.scrollTop) {
-                this.containerRef.current.scrollTop = offsetTop - this.containerRef.current.offsetTop;
-            }
+        const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`] as HTMLElement;
+
+        if (selectedCompletion) {
+            selectedCompletion.scrollIntoView({
+                behavior: "auto",
+                block: "nearest",
+            });
+        } else {
+            this.containerRef.current.scrollTo({ top: 0 });
         }
     }