diff --git a/react/lib/grid-stack-provider.tsx b/react/lib/grid-stack-provider.tsx index 0d35bd8f..215dc538 100644 --- a/react/lib/grid-stack-provider.tsx +++ b/react/lib/grid-stack-provider.tsx @@ -72,11 +72,8 @@ export function GridStackProvider({ const removeWidget = useCallback( (id: string) => { - const element = document.body.querySelector(`[gs-id="${id}"]`); - - if (element) { - gridStack?.removeWidget(element as GridItemHTMLElement); - } + const element = document.body.querySelector(`[gs-id="${id}"]`); + if (element) gridStack?.removeWidget(element); setRawWidgetMetaMap((prev) => { const newMap = new Map(prev); diff --git a/src/types.ts b/src/types.ts index a89e5653..f5636467 100644 --- a/src/types.ts +++ b/src/types.ts @@ -82,9 +82,9 @@ export interface GridItemHTMLElement extends HTMLElement { /** * Type representing various ways to specify grid elements. - * Can be a CSS selector string, HTMLElement, or GridItemHTMLElement. + * Can be a CSS selector string, GridItemHTMLElement (HTML element with GS variables when loaded). */ -export type GridStackElement = string | HTMLElement | GridItemHTMLElement; +export type GridStackElement = string | GridItemHTMLElement; /** * Event handler function types for the .on() method. diff --git a/src/utils.ts b/src/utils.ts index d3bc41da..76ac90d2 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -123,8 +123,17 @@ export class Utils { let list = root.querySelectorAll(els); if (!list.length && els[0] !== '.' && els[0] !== '#') { + // see if mean to be a class list = root.querySelectorAll('.' + els); - if (!list.length) { list = root.querySelectorAll('#' + els) } + + // else if mean to be an id + if (!list.length) list = root.querySelectorAll('#' + els); + + // else see if gs-id attribute + if (!list.length) { + const el = root.querySelector(`[gs-id="${els}"]`); + return el ? [el] : []; + } } return Array.from(list) as HTMLElement[]; }