Placeholder appears too small

[derwaldgeist]

If I am using react tags inside a table, the placeholder is always truncated, as its width is auto-calculated to 0:

Only if I place the cursor inside the input field, the display is expanded:

Is there any way to fix that?

As this width is calculated by the library and hard-coded on the element, there's no way to overrule it using CSS, unless you'd use !important. And it would only work for known placeholder lengths.

[derwaldgeist]

This only happens on the very first render. If the props change, the placeholders magically appear.

[i-like-robots]

Could you share a demo (e.g. Codepen or similar) showing this behaviour?

Please also let me know the version of the component you're using.

[shobhitnpm]

the same issue, we have, placeholder text is truncate as width is less based on placeholder text length. version: react-tag-autocomplete": "^5.11.2",

[i-like-robots]

Are you rendering the component on the server-side? My assumption is that the width will be calculated as 0 on the server you may be seeing this because it is not being recalculated when mounted on the client-side.

[derwaldgeist]

Nope, I am using the component on the client-side only.

[i-like-robots]

Have you had any luck creating a reproducible example of this? I've not seen this issue with the example included in this repo nor any of the implementations I manage.

[shobhitnpm]

Are you rendering the component on the server-side? My assumption is that the width will be calculated as 0 on the server you may be seeing this because it is not being recalculated when mounted on the client-side.

Yes, We are rendering the component from server side.

<ReactTags
	tags={tags}
	suggestions={suggestedItems}
	handleDelete={this.handleDelete.bind(this)}
	handleAddition={this.handleAddition.bind(this)}
	allowNew={true}
	handleInputChange={this.handleInputChange.bind(this)}
	handleBlur={this.handleBlurEvent.bind(this)}
	delimiters={[13, 188]} // keycode Enter, Comma
	ref={'textInputUniversal'}
	placeholder={placeholder}
	className={'form-control'}
	classNames={
		{ suggestions: 'react-tags__suggestions customSuggestions' }
	}
	maxSuggestionsLength={10}
/>

Please let me know if required more details.

[i-like-robots]

I have still not been able to recreate this issue. If you're able to provide a reproducible example of the issue then I'm happy to look into it, without one I'm afraid I cannot offer further help.

[alexandernajafi]

I have the exact same issue! I am using the css provided in the example from this git-repo (mast branch, as it is) and I am using lib version ^5.13.1.

I am also rendering on the client side. This is my code:

<ReactTags
    tags={deliveryTimeOptions}
    suggestions={deliveryTimeSuggestions}
    handleDelete={onDeliveryTimeDelete}
    handleAddition={onDeliveryTimeAdd}
    placeholder="Sök för att lägga till"
/>

As @derwaldgeist also experience, this only happens on the first render. If I input some text and then delete it, I can see the full placeholder text.

See screenshot:

Edit: I should mention that I am using react-strap in my project. Maybe that is the issue?

Also, adding this to the provided example CSS does in fact work:

.react-tags__search input {
...
  width: 120px !important;
}

[i-like-robots]

My best guess without having seen this issue myself is that the component may be created before the styles are available or enough layout (or reflow in FF) has been calculated - e.g. after the document is interactive but before it is complete.

As mentioned above, without a reproducible example I cannot investigate or attempt to fix or workaround this.