select component migration

To prepare for the Popover changes coming in Blueprint v5.0, we're providing "v2" variants of @blueprintjs/select components which use Popover2 instead of Popover. Migrate to these now in order to ensure a smooth migration path.

These components are available in the existing @blueprintjs/select package:

Select2

Replacement for Select, with notable changes (these also apply to Suggest2 and MultiSelect2):

• There is no more .bp4-popover-wrapper element. You will need to visually test your DOM layout to make sure the removal of this element does not break styling.
• Class names on some rendered elements have changed to their Popover2 replacements:
  • .bp4-popover-target → .bp4-popover2-target
  • .bp4-popover-arrow → .bp4-popover2-arrow
  • .bp4-popover-content → .bp4-popover2-content
  • ℹ️ remember to always use the $bp-ns variable in Sass and the Classes constants in TS/JS when referencing Blueprint class names
• The type of popoverProps has changed to Popover2Props, which means a few properties have changed. See Popover2 migration for more info.
  • popover positioning may be specified with "placement" or "position"
  • boundary has been replaced with rootBoundary, which better matches popper.js' definition of what a "boundary" is
  • modifiers type has changed
  • targetClassName and targetTagName properties have been removed
• Since popoverProps.matchTargetWidth is now available with Popover2, the matchTargetWidth prop has been removed. Use popoverProps={ matchTargetWidth } instead.
• New prop popoverContentProps allows forwarding props to the popover content wrapper element.
• New prop popoverRef allows access to the Popover2 component instance.
• Select.ofType<T>() helper method is now deprecated. TypeScript users should specify the generic type param inline in JSX syntax instead.
• In general, accessibility markup has been improved.

Target DOM changes

- <span class="bp4-popover-wrapper">
-   <span aria-haspopup="true" class="bp4-popover-target bp4-popover-open">
-     <div>
-       <button type="button" class="bp4-button">
-         ...
-       </button>
-     </div>
-   </span>
- </span>
+ <div
+   aria-controls="listbox-1"
+   aria-expanded="true"
+   aria-haspopup="listbox"
+   class="bp4-popover2-target bp4-popover2-open"
+   role="combobox"
+ >
+   <button type="button" class="bp4-button">
+     ...
+   </button>
+ </div>

Suggest2

Replacement for Suggest with the same notable changes as Select2, and also:

• The popover element no longer uses the .bp4-select-popover class, but rather the new, more specific .bp4-suggest-popover class.

Target DOM changes

- <span class="bp4-popover-wrapper">
-   <span aria-haspopup="true" class="bp4-popover-target">
-     <div class="bp4-input-group">
-       <input type="text" autocomplete="off" placeholder="Search..." class="bp4-input" value="">
-     </div>
-   </span>
- </span>
+ <div class="bp4-input-group bp4-popover2-target bp4-popover2-open">
+   <input
+     aria-autocomplete="list"
+     aria-controls="listbox-1"
+     aria-expanded="true"
+     aria-haspopup="listbox"
+     autocomplete="off"
+     class="bp4-input"
+     placeholder="Search..."
+     role="combobox"
+     type="text"
+     value=""
+   >
+ </div>

MultiSelect2

Replacement for MultiSelect with the same notable changes as Select2.

Target DOM changes

- <span class="bp4-popover-wrapper">
-   <span aria-haspopup="true" class="bp4-popover-target">
-     <div class="">
-       <div class="bp4-input bp4-tag-input bp4-multi-select">
-         ...
-       </div>
-     </div>
-   </span>
- </span>
+ <div
+   aria-autocomplete="list"
+   aria-controls="listbox-1"
+   aria-expanded="true"
+   aria-haspopup="listbox"
+   class="bp4-popover2-target bp4-popover2-open"
+   role="combobox"
+ >
+   <div class="bp4-input bp4-tag-input bp4-active bp4-multi-select">
+     ...
+   </div>
+ </div>