Comments (7)
For now you can use tagify.setContentEditable(false)
to disallow editing
from tagify.
If this is set to false the user cannot edit or update the text. There should be a way that user can remove the text and type until the limit reaches.
from tagify.
isn't there a way that we can simply remove the characters those exceeded the max length ?
from tagify.
you can tap into the input
event and then count the number or characters and disallow submitting the form/field until your max count is satisfied.
const MAX_CHARS = 100;
const tagify = new Tagify(...)
tagify.on('input', e => {
console.log(e.detail)
// count the number of characters
// you can also call this with either `true` or an error string to mark the field as invalid:
tagify.toggleScopeValidation(true || 'maximum characters reached')
})
from tagify.
So I managed to disable the button by getting the total. But I am facing weird behavior in non react input, it clears the input if state is called inside the INPUT callback, but works fine in the react version.
Issues facing with react and non react version:
- When added tag from the selected it always takes the cursor to the first position in the textearea, in react input comp.
- Slice the text only works for the first time using the change callback, if input callback used in the react comp it slices the text if there are spaces and takes the cursor to the first position. In non react working there's a weird behaviour cannot call react hooks inside the input call back.
- In non react comp it only updates the state if you click away from the textarea.
Expected:
The react component can somehow slice down the text to the max length and allows the tags to be entered accurately using the select.
Sharing the sandbox link below
https://codesandbox.io/p/sandbox/tagify-test-5ftnvt
from tagify.
Also I just noticed tha in react version if you add the tag by clicking on it from the dropdown it moves the cursor to the start of sentence, if you use keyboard to add it then works fine.
But in the normal version it works perfect the cursor moves to the end position of added tag using click.
from tagify.
you should open a new issue and please be clearer. You mean caret
, not cursor
which is the mouse pointer. I can barely understand the issue.
from tagify.
Related Issues (20)
- Console warning on tag addition via enter key HOT 1
- Warning in Console: [Tagify]: Cannot find element in Tag template: . .tagify__tag-text HOT 1
- mix mode : pressing the down key at the end of line displays drop-down list
- Multiple init Tagify HOT 1
- Sprockets error in Rails 7 due to filename change in v4.25.0
- Intermittent error in setRangeAtStartEnd HOT 3
- prop-type error HOT 9
- Clicking outside doesn't close dropdown in select mode and tagX class is blank
- Options not filtered in select mode, userInput=true and tagX='' HOT 1
- in 4.26.2 value cannot be non-string in users-list example
- A double tag is created for delimiter when typed HOT 3
- react.tagify.jsx Failed to compile HOT 3
- Ignore an email address in the middle of an sentence HOT 1
- Tagify selct mode incorrect behavior HOT 7
- React className property supports only one class
- "Uncaught (in promise) TypeError: t is null" when pressing Tab key with empty input and dropdown is shown
- default highlighting of selected value in single-select mode in the dropdown HOT 4
- autoComplete.rightKey = true, mode = null (Default), two problems with the rightKey behavior
- We Insert HTML Tags Or some text between '<' and '>' its remove from textarea when edit HOT 2
- On mobile device keyboard automatically adds space after dot type so it's not possible to write an email to tag
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tagify.