Obtaining the height of an element when triggered within lit-element

Is there a way to retrieve the height of an element when a specific event occurs?

I am trying to obtain the height of an editable div, but it seems that EventTarget does not have the necessary properties.

import { LitElement, html, customElement } from 'lit-element';

@customElement('my-example')
export class Example extends LitElement {
  render() {
    return html`
      <div
        @keyup="${(e: KeyboardEvent) => console.log(e.target?.offsetHeight)}"
        contenteditable="true"
      ></div>
    `;
  }
}

Error:

Property 'offsetHeight' does not exist on type 'EventTarget'.

Answer №1

Is it possible that <div> is unable to receive focus on its own? I stumbled upon this explanation: "In most browsers, a div cannot be focused, except for IE. However, you can still capture key events by using the body or form elements, which do allow focus." (https://www.sitepoint.com/community/t/onkeyup-on-div/2133/2)

I provided an example here:

I couldn't achieve focus until I included an <input> within the <div>.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Vercel Deployment: 'Page Cannot Be Found - Error 404'

When attempting to deploy my API on Vercel, I consistently encounter the same issue. The problem arises when: https://i.sstatic.net/6JjUJ.png I am using Node, Express, and Typescript. My project consists of a dist folder, as well as an initial src directo ...

When the variable type is an interface, should generics be included in the implementation of the constructor?

Here is a code snippet for you to consider: //LINE 1 private result: Map<EventType<any>, number> = new HashMap<EventType<any>, number>(); //LINE 2 private result: Map<EventType<any>, number> = new HashMap(); When the ...

Distinguishing keyboard and mouse events while focusing in React app

I have been working on implementing keyboard navigation focus outline for accessibility. The pseudo class :focus-visible works well on all elements except for input elements like text or textarea. It seems that inputs always have this pseudo class active s ...

Changing an inline function to a regular function

I am currently attempting to convert the signature of an inline function to a non-inline function: const onMouseEnter = (itemName: string): void => { alert(itemName); }; Despite my efforts, the attempted conversion did not yield the desired outcome. f ...

What is the best way to access the data being sent to a router link in Angular?

After navigating to the user page using the router sample below, how can I retrieve the details once it reaches the user page? I need to verify in my user.component.ts that the navigation is triggered by this [routerLink]="['user', user.id, &apo ...

What is the best way to extract the information from an ion input field?

I've tried this out: this.updatedValue = document.getElementById("processID"); this.updatedValueString = this.updatedValue.value; console.log("[INFO] Selected processID: >" + this.updatedValueString + "<"); But, I'm receiving this in logc ...

Encountering the error message 'Object is of type unknown' when implementing the createAsyncThunk function post utilization of Typescript and Redux Toolkit

Currently, I am utilizing Typescript in my React application where Redux Toolkit is being used for state management. The data is being fetched from an Express Api and everything operates smoothly if Redux is implemented without Typescript. However, when in ...

Retrieving attributes by their names using dots in HTML

Currently working on an Angular 2 website, I am faced with the challenge of displaying data from an object retrieved from the backend. The structure of the object is as follows: { version: 3.0.0, gauges:{ jvm.memory.total.used:{ value: 3546546 }}} The is ...

Tips for managing open and closed components within a React accordion and ensuring only the clicked component is opened

Unique Accordion component: const CustomAccordion = (props: AccordionProps) => { const { label, levels, activeId, id } = props const [isExpand, setIsExpand] = useState(false) const onPress = useEvent(() => { setIsExpand( ...

Displaying a segment of information extracted from a JSON array

I'm currently tackling a project that involves using React, Redux, and TypeScript. Within the JSON file, there is a key-value pair: "data_start": "2022-09-02" Is there a way to display this date in a different format, specifical ...

How to Implement Click Event Handling and Animation Effects in Angular 4

Every time I click on an item in the accordion list, all items expand. Is there a way to only open the card whose header was clicked? check out this plnkr example app.component.html <div id="accordion" *ngIf="res"> <div clas ...

Angular ReactiveForms not receiving real-time updates on dynamic values

I'm using reactive forms in Angular and I have a FormArray that retrieves all the values except for product_total. <tbody formArrayName="products"> <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i"> ...

Error in method class interface for Typescript

What causes the error message "the string is not assignable to iGreet" to appear? interface iGreet { (p: string ): string } class C { greeting: string; constructor(message: string) { this.greeting = message; } greet(p: ...

What methods can be used to ensure that a function always returns a value of a specific type?

Is it possible to enforce a strict return type in TypeScript? For example, if I have the following code: function codeToMsg(a: number): string { if (a == 200) return "OK"; } let msg = codeToMsg(123456); The compiler does not throw an error e ...

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

Converting typescript path aliases into local file paths

Just dipping my toes into typescript and grappling with module resolution. The problem seems straightforward (or so I think), but there's something off about my tsconfig.json. If my folder structure looks like this: + release + definitions + ...

Issue with TypeScript: variable lacks an initializer and is not explicitly assigned within the constructor

Code: class Example { private server: string; constructor() { this.setServer(); } setServer(): void { this.server = 'server'; } } new Example(); Error: ⨯ Unable to compile TypeScript: src/index.ts:309:13 ...

A guide on transferring received data from dataService within the parent component to the child component in Angular2

Within the context of my application, there exists a parent component named app-parent and a child component called app-child. In app-parent, I retrieve data from a DataService. @Component({ selector: 'app-parent', providers: [DataService] ...

How to access a variable from outside a promise block in Angular

Is there a way to access a variable declared outside of a promise block within an Angular 6 component? Consider the following scenario: items: string[] = []; ngOnInit() { const url='SOME URL'; const promise = this.apiService.post(url ...

Unable to Access Camera in Angular5 Instascan: <video> Issue

Having Trouble Displaying Camera View with Angular5 and Instascan, Despite Camera Being On app.component.ts constructor(){ this.Instascan= require('instascan'); let scanner = new this.Instascan.Scanner({ video: document.getElementById("pr ...