matthewp / haunted

React's Hooks API implemented for web components 👻

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

haunted.js:492 Uncaught (in promise) TypeError: Cannot read property 'parentNode' of undefined

fwermus opened this issue · comments

I am trying to develop an upload file component. What I need is to reformat path to filename to show to user. But, I got haunted.js:492 Uncaught (in promise) TypeError: Cannot read property 'parentNode'.

Next the stack trace and code

haunted.js:492 Uncaught (in promise) TypeError: Cannot read property 'parentNode' of undefined
at teardownOnRemove (haunted.js:492)
at haunted.js:481
at AttributePart.commit (parts.ts:128)
at TemplateInstance.update (template-instance.ts:53)
at NodePart.__commitTemplateResult (parts.ts:280)
at NodePart.commit (parts.ts:221)
at render (render.ts:55)
at Scheduler.commit (haunted.js:138)
at Scheduler.handlePhase (haunted.js:111)
at Array. (haunted.js:98)

import { html } from "https://unpkg.com/lit-html/lit-html.js";
import { component, useState, useMemo, virtual } from "https://unpkg.com/haunted/haunted.js";

...

const FmtUploaded = virtual(() => {
return htmltesting;
});

function ProductsUpload({ class:cls }) {

let [uploaded, setUploaded] = useState("");
const result = useMemo(() => uploadFile(uploaded), [uploaded]);

return html`
<style>
...
</style>

<div>
<input type="text" value="${FmtUploaded()}" class="custom-file-upload"/>
    <label for="uploadFile" class="custom-file-upload">
      <i class="fa fa-cloud-upload"></i> Seleccionar archivo
    </label>
    
    <input 
      id="uploadFile" 
      name="uploadFile" 
      type="file"
      @change=${event => setUploaded(event.target.value)} />
      <iron-icon id="searchButton" slot="suffix" suffix icon="paper-input-file:search" ></iron-icon>

    <br/>
    <p>${result}</p>
</div>

`;
}