@@ -44,7 +44,7 @@ import {
44
44
} from './Menu' ;
45
45
import CheckmarkIcon from '../ui-icons/Checkmark' ;
46
46
import ChevronIcon from '../ui-icons/Chevron' ;
47
- import { createContext , CSSProperties , ForwardedRef , forwardRef , ReactNode , Ref , useCallback , useContext , useEffect , useImperativeHandle , useRef , useState } from 'react' ;
47
+ import { createContext , CSSProperties , ForwardedRef , forwardRef , ReactNode , Ref , useCallback , useContext , useEffect , useImperativeHandle , useMemo , useRef , useState } from 'react' ;
48
48
import { createFocusableRef } from '@react-spectrum/utils' ;
49
49
import { field , fieldInput , getAllowedOverrides , StyleProps } from './style-utils' with { type : 'macro' } ;
50
50
import { FieldErrorIcon , FieldGroup , FieldLabel , HelpText , Input } from './Field' ;
@@ -56,7 +56,7 @@ import {IconContext} from './Icon';
56
56
// @ts -ignore
57
57
import intlMessages from '../intl/*.json' ;
58
58
import { menu } from './Picker' ;
59
- import { mergeRefs , useResizeObserver } from '@react-aria/utils' ;
59
+ import { mergeRefs , useResizeObserver , useSlotId } from '@react-aria/utils' ;
60
60
import { Placement } from 'react-aria' ;
61
61
import { PopoverBase } from './Popover' ;
62
62
import { pressScale } from './pressScale' ;
@@ -367,6 +367,9 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
367
367
let timeout = useRef < ReturnType < typeof setTimeout > | null > ( null ) ;
368
368
let [ showLoading , setShowLoading ] = useState ( false ) ;
369
369
let isLoading = loadingState === 'loading' || loadingState === 'filtering' ;
370
+ { /* Logic copied from S1 */ }
371
+ let showFieldSpinner = useMemo ( ( ) => showLoading && ( isOpen || menuTrigger === 'manual' || loadingState === 'loading' ) , [ showLoading , isOpen , menuTrigger , loadingState ] ) ;
372
+ let spinnerId = useSlotId ( [ showFieldSpinner ] ) ;
370
373
371
374
let inputValue = state ?. inputValue ;
372
375
let lastInputValue = useRef ( inputValue ) ;
@@ -467,18 +470,18 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
467
470
< InputContext . Consumer >
468
471
{ ctx => (
469
472
< InputContext . Provider value = { { ...ctx , ref : mergeRefs ( ( ctx as any ) ?. ref , inputRef ) } } >
470
- < Input />
473
+ < Input aria-describedby = { spinnerId } />
471
474
</ InputContext . Provider >
472
475
) }
473
476
</ InputContext . Consumer >
474
477
{ isInvalid && < FieldErrorIcon isDisabled = { isDisabled } /> }
475
- { /* Logic copied from S1 */ }
476
- { showLoading && ( isOpen || menuTrigger === 'manual' || loadingState === 'loading' ) && (
478
+ { showFieldSpinner && (
477
479
< ProgressCircle
480
+ id = { spinnerId }
478
481
isIndeterminate
479
482
size = "S"
480
483
styles = { progressCircleStyles ( { size, isInput : true } ) }
481
- aria-label = { stringFormatter . format ( 'table.loadingMore ' ) } />
484
+ aria-label = { stringFormatter . format ( 'table.loading ' ) } />
482
485
) }
483
486
< Button
484
487
ref = { buttonRef }
0 commit comments