Revert "Fix authoring react vocabulary field moving on a different row if sel…" (#5108)

This reverts commit b11823c.

Author: eos87

scripts/apps/authoring-react/fields/README.md

@@ -13,80 +13,9 @@ interface IProps {
     noPadding: boolean;
 }
 
-interface IState {
-    availableWidth: number | null;
-}
-
-/**
- * This component should only be used within a `MultiSelectTreeWithTemplate` component
- */
-export class DropdownItemTemplate extends React.PureComponent<IProps, IState> {
-    private containerRef: React.RefObject<HTMLSpanElement>;
-
-    constructor(props: IProps) {
-        super(props);
-        this.containerRef = React.createRef();
-        this.state = {
-            availableWidth: null,
-        };
-    }
-
-    componentDidMount() {
-        this.calculateAvailableWidth();
-    }
-
-    componentDidUpdate() {
-        this.calculateAvailableWidth();
-    }
-
-    private calculateAvailableWidth = () => {
-        const container = this.containerRef.current;
-
-        if (container == null) {
-            return;
-        }
-
-        // Find the tags-input__helper-box or tags-input__single-item container
-        let widthContainer: HTMLElement | null = container.parentElement;
-
-        while (widthContainer != null) {
-            if (
-                widthContainer.classList.contains('tags-input__helper-box') ||
-                widthContainer.classList.contains('tags-input__single-item')
-            ) {
-                break;
-            }
-
-            widthContainer = widthContainer.parentElement;
-        }
-
-        if (widthContainer == null) {
-            return;
-        }
-
-        const containerWidth = widthContainer.clientWidth;
-        const containerStyle = window.getComputedStyle(widthContainer);
-        const containerPadding = parseFloat(containerStyle.paddingLeft) + parseFloat(containerStyle.paddingRight);
-
-        // Account for sibling elements (like the remove button)
-        let siblingsWidth = 0;
-
-        for (const child of Array.from(widthContainer.children)) {
-            if (!child.contains(container)) {
-                siblingsWidth += (child as HTMLElement).offsetWidth;
-            }
-        }
-
-        const availableWidth = containerWidth - containerPadding - siblingsWidth;
-
-        if (availableWidth !== this.state.availableWidth && availableWidth > 0) {
-            this.setState({availableWidth});
-        }
-    };
-
+export class DropdownItemTemplate extends React.PureComponent<IProps> {
     render() {
         const {option, noPadding, config} = this.props;
-        const {availableWidth} = this.state;
 
         if (option == null) {
             return null;
@@ -95,26 +24,18 @@ export class DropdownItemTemplate extends React.PureComponent<IProps, IState> {
         const itemStyle: React.CSSProperties = {
             height: '1.5em',
             minWidth: '1.5em',
-            maxWidth: availableWidth != null ? `${availableWidth}px` : undefined,
             backgroundColor: option.color ?? 'transparent',
             color: option.color == null ? 'black' : getTextColor(option.color),
             display: 'inline-flex',
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: config.source === 'manual-entry' && config.roundCorners ? '999px' : '2px',
             padding: noPadding ? '0' : '4px',
-        };
-
-        const labelStyle: React.CSSProperties = {
             whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
         };
 
         return (
-            <span ref={this.containerRef} style={itemStyle}>
-                <span style={labelStyle}>{option.label}</span>
-            </span>
+            <span style={itemStyle}>{option.label}</span>
         );
     }
 }

scripts/apps/authoring-react/fields/dropdown/dropdown-item-template.tsx

@@ -30,35 +30,37 @@ export class EditorUsingManualSourceOrVocabulary extends React.PureComponent<IPr
     render() {
         const {config} = this.props;
         const Container = this.props.container;
-        let values: Array<string> | Array<number>;
+        const values: Array<string> | Array<number> = (() => {
+            if (this.props.value == null) {
+                return [];
+            } else if (Array.isArray(this.props.value)) {
+                return this.props.value;
+            } else {
+                return [this.props.value];
+            }
+        })();
 
-        if (this.props.value == null) {
-            values = [];
-        } else if (Array.isArray(this.props.value)) {
-            values = this.props.value;
-        } else {
-            values = [this.props.value] as Array<string> | Array<number>;
-        }
-
-        let options: ITreeWithLookup<IDropdownOption>;
+        const options: ITreeWithLookup<IDropdownOption> = (() => {
+            if (config.source === 'manual-entry') {
+                const _options: ITreeWithLookup<IDropdownOption> = {
+                    nodes: arrayToTree(
+                        config.options,
+                        ({id}) => id.toString(),
+                        ({parent}) => parent?.toString(),
+                    ).result,
+                    lookup: keyBy(
+                        config.options.map((opt) => ({value: opt})),
+                        (opt) => opt.value.id.toString(),
+                    ),
+                };
 
-        if (config.source === 'manual-entry') {
-            options = {
-                nodes: arrayToTree(
-                    config.options,
-                    ({id}) => id.toString(),
-                    ({parent}) => parent?.toString(),
-                ).result,
-                lookup: keyBy(
-                    config.options.map((opt) => ({value: opt})),
-                    (opt) => opt.value.id.toString(),
-                ),
-            };
-        } else if (config.source === 'vocabulary') {
-            options = getOptions(config, this.props.getVocabularyItems);
-        } else {
-            assertNever(config);
-        }
+                return _options;
+            } else if (config.source === 'vocabulary') {
+                return getOptions(config, this.props.getVocabularyItems);
+            } else {
+                assertNever(config);
+            }
+        })();
 
         const selected =
             values