Allow changing the placeholder after initialization

[yairEO]

Currently the placeholder is being applied via the wrapper template, once the Tagify instance has been created, and cannot be changed afterwards.

I suggest adding a method (on the Tagify instance) for setting the placeholder

[yairEO]

Currently it can be changed by:

tagify.DOM.input.setAttribute('data-placeholder', 'type some tags')

[adrienpoly]

Thanks for this tip it was very useful. I used it to auto-hide the placeholder when there is content within the input. A default auto hide feature for the place holder would be a great addition too

Thanks for this amazing library

[yairEO]

Thank you, but I don't understand anything of what you've said.. could you put here a video of the problem, or at least steps to reproduce?

[jasonhill]

It would be great to have the ability to auto-hide the placeholder when one or more tags have been selected and then show it again when all the tags have been removed. Currently, we are achieving this by hooking to the change event but it would be good to have a Tagify setting to do this automatically.

[yairEO]

@jasonhill - this can and should be done with a simple CSS by the developer who implements Tagify

It's not a javascript-thing

[jasonhill]

It feels like something that should also be part of the component. Inputs hide the placeholder once there is a value present so Tagify is operating differently to standard inputs. A simple configuration flag to hide the placeholder when the tags are not empty would be convenient.

On Wed, 30 Jun 2021 at 22:37, Yair Even Or @.***> wrote:

@jasonhill https://github.com/jasonhill - this can and should be done with a simple CSS by the developer who implements Tagify

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yairEO/tagify/issues/562#issuecomment-871365800, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKDZDZ2O2XBKGYOL4UA76DTVMFZNANCNFSM4OTPYU6A .

[yairEO]

A simple configuration flag to hide the placeholder when the tags are not empty would be convenient.

@jasonhill - what is the difference between typing the code for that configuration and typing the CSS code to hide it? it's the same development effort and approximately same amount of code

Tagify already has many configurable settings and I don't want to make a new setting for every little thing a developer can easily customize by him/her-self.

I've built the code in such high flexibility to allow developers to customize everything easily without me having to manually write a setting for every scenario

I only write settings which are popular/trivial and/or too complex to achieve by local customization. CSS customization should not be something to avoid :)

[jasonhill]

Ok…we will use css then. I still find it strange that the placeholder default behaviour isn’t the same as regular placeholders though.

On 4 Jul 2021, at 6:44 am, Yair Even Or @.***> wrote:

 A simple configuration flag to hide the placeholder when the tags are not empty would be convenient.

@jasonhill - what is the difference between typing the code for that configuration and typing the CSS code to hide it? it's the same development effort and approximately same amount of code

Tagify already has many configurable settings and I don't want to make a new setting for every little thing a developer can easily customize by him/her-self.

I've built the code in such high flexibility to allow developers to customize everything easily without me having to manually write a setting for every scenario

I only write settings which are popular/trivial and/or too complex to achieve by local customization. CSS customization should not be something to avoid :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[yairEO]

@jasonhill - I understand what you are saying as it seems different than default built-in inputs, but those has a single value, and there is no real comparable native-browser input with both placeholder and multi-selection, so I simply wrote the default behavior as what seemed to me as logical, because I want to signal users where can they click to start typing, and a placeholder achieves this.

A "regular" (text) input, for example, can be clicked anywhere inside, but tagify is more complex. clicking/double-clicking tags trigger a whole flow of events which are different from clicking the "input" area where the placeholder is located.

If I remove the placeholder for Tagify components which already has tags, and lets assume the user is unfamiliar with Tagify and he/she where not the ones that added these tags in the first place, then the user might be unsure it they can add tags or where to click to do that, so I just wanted to eliminate any such uncertainty.

[tsegreto]

I mean, I completely agree with jasonhill. This is a huge oversight and should be addressed.

[yairEO]

@tsegreto - How is this huge if you can easily define this in your CSS:

.tagify__tag + .tagify__input::before{ opacity:0; }

Or this

.tagify:not(.tagify--noTags){
  --placeholder-color: transparent;
  --placeholder-color-focus: transparent;
}