[select] feat(Select): new prop "matchTargetWidth"

packages/docs-app/src/examples/select-examples/selectExample.tsx

@@ -34,6 +34,7 @@ export interface ISelectExampleState {
     resetOnSelect: boolean;
     disableItems: boolean;
     disabled: boolean;
+    matchTargetWidth: false;
 }
 
 export class SelectExample extends React.PureComponent<IExampleProps, ISelectExampleState> {
@@ -45,6 +46,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         disabled: false,
         filterable: true,
         hasInitialContent: false,
+        matchTargetWidth: false,
         minimal: false,
         resetOnClose: false,
         resetOnQuery: true,
@@ -71,6 +73,8 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
 
     private handleResetOnSelectChange = this.handleSwitchChange("resetOnSelect");
 
+    private handleMatchTargetWidthChange = this.handleSwitchChange("matchTargetWidth");
+
     public render() {
         const { allowCreate, disabled, disableItems, minimal, ...flags } = this.state;
 
@@ -124,6 +128,11 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
                     checked={this.state.disableItems}
                     onChange={this.handleItemDisabledChange}
                 />
+                <Switch
+                    label="Match target width"
+                    checked={this.state.matchTargetWidth}
+                    onChange={this.handleMatchTargetWidthChange}
+                />
                 <Switch
                     label="Allow creating new items"
                     checked={this.state.allowCreate}

packages/select/src/common/classes.ts

@@ -25,3 +25,4 @@ export const OMNIBAR = `${NS}-omnibar`;
 export const OMNIBAR_OVERLAY = `${OMNIBAR}-overlay`;
 export const SELECT = `${NS}-select`;
 export const SELECT_POPOVER = `${SELECT}-popover`;
+export const MATCH_TARGET_WIDTH = "full-width";

packages/select/src/components/select/_select.scss

@@ -29,3 +29,12 @@ $select-popover-max-width: $pt-grid-size * 40 !default;
     }
   }
 }
+
+.full-width {
+  width: 100%;
+
+  .#{$ns}-menu {
+    max-width: none;
+    min-width: 0;
+  }
+}

packages/select/src/components/select/select.tsx

@@ -63,6 +63,13 @@ export interface ISelectProps<T> extends IListItemsProps<T> {
      */
     inputProps?: InputGroupProps2;
 
+    /**
+     * Whether the select popover should match the width of the target.
+     *
+     * @default false
+     */
+    matchTargetWidth?: boolean;
+
     /** Props to spread to `Popover`. Note that `content` cannot be changed. */
     // eslint-disable-next-line @typescript-eslint/ban-types
     popoverProps?: Partial<IPopoverProps> & object;
@@ -129,7 +136,31 @@ export class Select<T> extends AbstractPureComponent2<SelectProps<T>, ISelectSta
 
     private renderQueryList = (listProps: IQueryListRendererProps<T>) => {
         // not using defaultProps cuz they're hard to type with generics (can't use <T> on static members)
-        const { filterable = true, disabled = false, inputProps = {}, popoverProps = {} } = this.props;
+        const {
+            filterable = true,
+            disabled = false,
+            inputProps = {},
+            popoverProps = {},
+            matchTargetWidth,
+        } = this.props;
+
+        if (matchTargetWidth) {
+            if (popoverProps.modifiers == null) {
+                popoverProps.modifiers = {};
+            }
+
+            popoverProps.modifiers.minWidth = {
+                enabled: true,
+                fn: data => {
+                    data.styles.width = `${data.offsets.reference.width}px`;
+                    return data;
+                },
+                order: 800,
+            };
+
+            popoverProps.usePortal = false;
+            popoverProps.wrapperTagName = "div";
+        }
 
         const input = (
             <InputGroup
@@ -155,7 +186,11 @@ export class Select<T> extends AbstractPureComponent2<SelectProps<T>, ISelectSta
                 {...popoverProps}
                 className={classNames(listProps.className, popoverProps.className)}
                 onInteraction={this.handlePopoverInteraction}
-                popoverClassName={classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName)}
+                popoverClassName={classNames(
+                    Classes.SELECT_POPOVER,
+                    popoverProps.popoverClassName,
+                    matchTargetWidth ? Classes.MATCH_TARGET_WIDTH : undefined,
+                )}
                 onOpening={this.handlePopoverOpening}
                 onOpened={this.handlePopoverOpened}
                 onClosing={this.handlePopoverClosing}