From 554a3cfa4e6ec5e4a3a9c202d74aee5d650aa1c4 Mon Sep 17 00:00:00 2001
From: rorry121 <ieloul@foxmail.com>
Date: Thu, 6 Oct 2022 04:55:43 +0800
Subject: [PATCH] feat(fromEvent): support HTMLElement (#2048)

Co-authored-by: luolei <luolei@kuaishou.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/rxjs/from/index.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/rxjs/from/index.ts b/packages/rxjs/from/index.ts
index 0b21346fef9..436d58e1e90 100644
--- a/packages/rxjs/from/index.ts
+++ b/packages/rxjs/from/index.ts
@@ -2,6 +2,7 @@ import { Observable, fromEvent as fromEventRx, from as fromRxjs } from 'rxjs'
 import type { ObservableInput } from 'rxjs'
 import { filter, mergeMap } from 'rxjs/operators'
 import type { Ref, WatchOptions } from 'vue-demi'
+import type { MaybeRef } from '@vueuse/shared'
 import { isRef, watch } from 'vue-demi'
 
 export function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: WatchOptions): Observable<T> {
@@ -19,9 +20,12 @@ export function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: Watch
   }
 }
 
-export function fromEvent<T extends HTMLElement>(value: Ref<T>, event: string): Observable<Event> {
-  return from(value, { immediate: true }).pipe(
-    filter(value => value instanceof HTMLElement),
-    mergeMap(value => fromEventRx(value, event)),
-  )
+export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: string): Observable<Event> {
+  if (isRef<T>(value)) {
+    return from(value, { immediate: true }).pipe(
+      filter(value => value instanceof HTMLElement),
+      mergeMap(value => fromEventRx(value, event)),
+    )
+  }
+  return fromEventRx(value, event)
 }