@@ -140,6 +140,7 @@ function SearchAutocomplete(props) {
140140 let inputRef = React .useRef (null );
141141 let listBoxRef = React .useRef (null );
142142 let popoverRef = React .useRef (null );
143+ let buttonRef = React .useRef (null );
143144
144145 let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete (
145146 {
@@ -151,7 +152,7 @@ function SearchAutocomplete(props) {
151152 state
152153 );
153154
154- let {buttonProps} = useButton (clearButtonProps );
155+ let {buttonProps} = useButton (clearButtonProps , buttonRef );
155156
156157 return (
157158 <div style = { {display: ' inline-flex' ' column' } >
@@ -167,7 +168,7 @@ function SearchAutocomplete(props) {
167168 fontSize: 16
168169 }} />
169170 { state .inputValue !== ' ' &&
170- <button { ... buttonProps } >❎</button >
171+ <button { ... buttonProps } ref = { buttonRef } >❎</button >
171172 }
172173 { state .isOpen &&
173174 <Popover state = { state } triggerRef = { inputRef } popoverRef = { popoverRef } isNonModal placement = " bottom start"
@@ -203,21 +204,23 @@ See [usePopover](usePopover.html) for more examples of popovers.
203204 <summary style = { {fontWeight: ' bold' } ><ChevronRight size = " S" summary >
204205
205206``` tsx example export=true render=false
207+ import type {AriaPopoverProps } from ' react-aria'
208+ import type {OverlayTriggerState } from ' react-stately'
206209import {usePopover , Overlay , DismissButton } from ' @react-aria/overlays'
207210
208- function Popover({ children , state , ... props }) {
209- let ref = React .useRef ();
210- let {popoverRef = ref } = props ;
211- let {popoverProps} = usePopover ({
212- ... props ,
213- popoverRef
214- } , state );
211+ interface PopoverProps extends AriaPopoverProps {
212+ children : React .ReactNode ,
213+ state : OverlayTriggerState
214+ }
215+
216+ function Popover({ children , state , ... props } : PopoverProps ) {
217+ let {popoverProps} = usePopover ( props , state );
215218
216219 return (
217220 <Overlay
218221 <div
219222 { ... popoverProps }
220- ref = { popoverRef }
223+ ref = { props . popoverRef as React . RefObject < HTMLDivElement > }
221224 style = { {
222225 ... popoverProps .style ,
223226 background: ' lightgray'
@@ -246,7 +249,7 @@ user types in the SearchAutocomplete. They can also be shared with other compone
246249import {useListBox , useOption } from ' @react-aria/listbox'
247250
248251function ListBox(props ) {
249- let ref = React .useRef ();
252+ let ref = React .useRef (null );
250253 let {listBoxRef = ref , state} = props ;
251254 let {listBoxProps} = useListBox (props , state , listBoxRef );
252255
@@ -273,7 +276,7 @@ function ListBox(props) {
273276}
274277
275278function Option({item , state }) {
276- let ref = React .useRef ();
279+ let ref = React .useRef (null );
277280 let {optionProps, isSelected, isFocused, isDisabled} = useOption ({key: item .key }, state , ref );
278281
279282 let backgroundColor;
@@ -350,7 +353,7 @@ function Example() {
350353 {id: 8 , name: ' Agricultural'
351354 {id: 9 , name: ' Electrical'
352355 ];
353- let [major, setMajor] = React .useState ();
356+ let [major, setMajor] = React .useState (null );
354357
355358 let onSubmit = (value , key ) => {
356359 if (value ) {
0 commit comments