we are using floating UI with Vue and Typescript.
import { ref } from 'vue';
import { ReferenceElement, useFloating } from '@floating-ui/vue';
const reference = ref<ReferenceElement>();
const floating = ref<HTMLElement>();
useFloating(reference, floating);
We have recently started getting a ts error on passing reference to useFloating:
Argument of type 'Ref<ReferenceElement | undefined>' is not assignable to parameter of type 'Readonly<Ref<MaybeElement<ReferenceElement>>>'.
Property '[RefSymbol]' is missing in type 'Ref<ReferenceElement | undefined>' but required in type 'Readonly<Ref<MaybeElement<ReferenceElement>>>'.ts(2345)
reactivity.d.ts(384, 5): '[RefSymbol]' is declared here.
Floating UI useFloating is decalared as
export declare function useFloating<T extends ReferenceElement = ReferenceElement>(reference: Readonly<Ref<MaybeElement<T>>>, floating: Readonly<Ref<MaybeElement<FloatingElement>>>, options?: UseFloatingOptions<T>): UseFloatingReturn;
Vue's Ref declaration is...
declare const RefSymbol: unique symbol;
declare const RawSymbol: unique symbol;
export interface Ref<T = any> {
value: T;
/**
* Type differentiator only.
* We need this to be in public d.ts but don't want it to show up in IDE
* autocomplete, so we use a private Symbol instead.
*/
[RefSymbol]: true;
}
It sounds like FloatingUI should NOT be looking for RefSymbol in the type as its a hidden field use for a differentiator ??
Any ideas how to sort this, rather than just suppressing the error?