react-tags

react-tags copied to clipboard

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.

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

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.

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",

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.

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

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.

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 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.

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;
}

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.