How can I move the cursor to the beginning of a long string in Mat-autocomplete when it appears at the end?

I'm struggling to figure out how to execute a code snippet for my Angular app on Stack Overflow.

Specifically, I am using mat-autocomplete. When I select a name that is 128 characters long, the cursor appears at the end of the selected string instead of at the beginning. Has anyone else experienced this issue with mat-autocomplete?

For example, in this StackBlitz demo, I added the letter 'v' to the name 'California'. When I select 'California', the cursor is placed at the end of the string rather than where I would like it to be - at the beginning.

In the source code (located at app > app.component.ts in the provided link), look at the state variable and change the name property to a 128 character long string. Then, when you select an option from the drop-down menu, observe the cursor appearing at the end of the string.

angulartypescriptmat-autocomplete

Answer №1

Utilizing the built-in APIs of input and textarea eliminates the need for a custom Range implementation. In our scenario, calling setSelectionRange() is sufficient. However, even after this operation, the content within the input field remains hidden. It appears that invoking both blur() and focus() resolves this issue.

optionSelected(input: HTMLInputElement) {
  input.blur();
  input.setSelectionRange(0, 0);
  input.focus();
}

<input ... #input>
<mat-autocomplete ... (optionSelected)="optionSelected(input)">

DEMO

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

Error in Angular ESLint: The key parameter is mandatory

I'm attempting to download a file using the Angular code below, but I consistently receive an error stating Parameter "key" required const headerValues = new HttpHeaders({ 'Content-Type': contentType!, 'Accept': contentTy ...

angularjsangulareslint

Incorporating fresh components and newly defined attributes in Angular

Is there a way for me to click on a new component button, specify a name, description, select type, and add attributes such as default value and type? I need all this information to be saved and for the new button to appear in the drag-and-drop section. ...

htmlangularangularjstypescript

Synchronization problem encountered in an Angular app involving playwright

Currently, I am working on automating a process where the service queries the database and displays the data on the user interface. However, the rendering takes a considerable amount of time, around 3 minutes. Despite using Playwright for automation, it do ...

angulartypescriptautomated-testssingle-page-applicationplaywright

Error in Angular 2.0 final version: Unable to access the 'injector' property of null object

Upon transitioning from Angular 2 RC5 to 2.0 Final, I've encountered some errors while running my tests. It's puzzling me as to what could be causing this issue. TypeError: Cannot read property 'injector' of null at TestBed._create ...

unit-testingtestingangulartypescriptangular2-testing

Problem Encountered with Inaccurate Binding of Dynamic Form Control Values in Angular

UPDATE: Follow this link to access the editor for my Stackblitz application, which demonstrates a simplified version of the issue regarding the "transfer" of value between the first and second controls. I am currently developing a dynamic form in Angular ...

htmlangulardomangular-reactive-forms

Encountering difficulties in starting a new Angular project using a Mac operating system

Attempting to set up a fresh Angular project named 'test' on a Mac. The command used in Terminal is as follows: xxxx$ ng new test Upon execution, the following error is displayed: -bash: /Users/xxxx/.npm-packages/lib/node_modules/@angular/cli ...

angular

Find all documents in Angular Firestore that are related to a specific document_REFERENCE

Seeking a way to search through all documents in collection a that have a reference to a specific document in collection b. Despite my efforts, I couldn't find a solution here or on Google :/ This is what I tried in my service class: getAsFromB(id ...

angulartypescriptgoogle-cloud-firestore

The compilation of TypeScript and ES Modules is not supported in Firebase Functions

Recently, I integrated Firebase Functions into my project with the default settings, except for changing the value "main": "src/index.ts" in the package.json file because the default path was incorrect. Here is the code that was working: // index.ts cons ...

typescriptfirebasegoogle-cloud-functionses6-modules

Setting up a new folder in the internal storage within a React Native Expo environment

In my React Native Expo project, I am utilizing two functions to store data in a JSON file and then save the file to internal storage. However, the code currently asks for permission to store inside a chosen folder, but does not create the "ProjectName" fo ...

javascripttypescriptreact-nativeexpolocal-storage

Angular2 URL fragment not recognized in Firefox

My website's main page is divided into different sections: Introduction Services Projects All the content is on the same page. To navigate to a specific section, I use Angular2 fragments in my navigation structure. Here's the HTML snippet for ...

angularangular2-routing

Troubles with implementing child routes in Angular 6

I'm having trouble getting the routing and child routing to work in my simple navigation for an angular 6 app. I've configured everything correctly, but it just doesn't seem to be working. Here is the structure of my app: └───src ...

angularhtmltypescriptangular-routing

What is the best way to utilize the `Headers` iterator within a web browser?

Currently, I am attempting to utilize the Headers iterator as per the guidelines outlined in the Iterator documentation. let done = false while ( ! done ) { let result = headers.entries() if ( result.value ) { console.log(`yaay`) } ...

javascripttypescriptdomecmascript-6iterator

Guide to specifying the indexer type of a function argument as T[K] being of type X in order for t[k]=x to be a permissible expression

Currently, I am attempting to create a function that can alter a boolean property within an object based on the provided object and property name. While I have found some helpful information here, the function body is still producing errors. Is there a way ...

typescript

Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

Is there a way to prevent the occurrence of the "no nested ternary" error in TypeScript? disablePortal options={ // eslint-disable-next-line no-nested-ternary units=== "mm&quo ...

typescriptmaterial-uinestedconditional-operator

The incorrect argument is being used to infer the generic type

I have implemented the NoInfer feature from the library called ts-toolbelt. However, it seems that the example provided below does not reflect its intended effect. In this scenario, the generic type is deduced from the util function as soon as it is intr ...

typescript

The makeStyles() function in Material-UI does not apply styles to CSS combinators and pseudo-classes

Current Behavior ...

reactjstypescriptmaterial-ui

Encountering an error in resolving symbol values statically within the Angular module

Following a helpful guide, I have created the module below: @NgModule({ // ... }) export class MatchMediaModule { private static forRootHasAlreadyBeenCalled: boolean = false; // This method ensures that the providers of the feature module ar ...

javascriptangularangular-module

The test suite encountered an error (EBUSY: resource busy or locked) and unfortunately failed to run at Nx version 14.5.10 and Jest version 27.5.1. It seems there was an

I have recently upgraded my NX Monorepo from version 13 to 14, and everything seems to be working fine except for the Jest migration. I keep encountering this error even after trying various solutions like clearing the cache, deleting node_modules, and rei ...

javascriptangularjestjsts-jestnomachine-nx

Is it possible to utilize the spread operator for combining arrays?

Consider two different arrays represented by variables a and b. The variable c represents the output as a single array, indicating that this method combines two or more arrays into one. let a=[a ,b]; let b=[c ,d]; c=[a,...b] The resulting array will be: ...

javascriptangularangularjstypescript

The module "ng-particles" does not have a Container component available for export

I have integrated ng-particles into my Angular project by installing it with npm i ng-particles and adding app.ts import { Container, Main } from 'ng-particles'; export class AppComponent{ id = "tsparticles"; /* Using a remote ...

javascriptangulartypescriptanimationparticles.js