(Sometimes) Only the first character of the Placeholder is shown

[viktorsmari]

I did:

• Search for if my issue has already been submitted
• Make sure I'm reporting something precise that needs to be fixed
• Give my issue a descriptive and concise title
• Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo on the Selectize docs)
• Indicate precise steps to reproduce in numbers and the result,
  like below

Sometimes only half of the first character is visible. See screenshot:

This happens in Chrome, Firefox, and on mobile Android Chrome.

This is due to the following width: 4px being added to the input. If I disable the width in the inspector, all the text becomes visible again (not only the first letter).

From the inspector:

<input 
  type="select-one" 
  autocomplete="off" tabindex="7" 
  id="material_inventory_id-selectized" 
  placeholder="Please select" 
  required="" 
  style="width: 4px; opacity: 1; position: relative; left: 0px;">

I suspect this has something to do with Turbolinks / Rails 5.2
The issue only occurs when I navigate around, it seems at random.
If I refresh the affected page, it is fixed.

Steps to reproduce:

1. Since this happens sometimes, you need to copy the stiles above.
2. Looks like the 4px is happening in more examples: https://www.google.es/search?q=%22width%3A+4px%3B+opacity%3A+1%3B+position%3A+relative%3B+left%3A+0px%3B%22&oq=%22width%3A+4px%3B+opacity%3A+1%3B+position%3A+relative%3B+left%3A+0px%3B%22&aqs=chrome..69i57.400j0j7&client=ubuntu&sourceid=chrome&ie=UTF-8

Expected result: The Placeholder should be visible.
Actual result: Only the first characther of the Placeholder is visible.

Related: #1368

[viktorsmari]

Does anybody know where (and why) the width: 4px comes from?

[knoxcard]

Here is how I fixed it...

$('.selectize-input > input').each(function() {
	$(this).on('focus', function() {
		var o_this = $(this)
		setTimeout(function() {
			o_this.css({
				width: '40px',
			    position: 'relative',
			    left: '0px',
			    opacity: 1
			})
		}, 20)
		setTimeout(function() {
			selectizeHideItemOnFocus(o_this)
		}, 20)
		var sel = $('#' + o_this.attr('id').replace('-selectized', '')).get(0).selectize
		sel.clear()
	})
	$(this).on('blur', function() {
		var o_this = $(this)
		setTimeout(function() {
			o_this.removeAttr('style')
			o_this.parent().parent().find('.selectize-input').removeClass('input-active')
			o_this.parent().find('.item').show()
		}, 140)
		if(typeof($(this).attr('data-value')) === 'undefined')
			return
		setTimeout(function() {
			var sel = $('#' + o_this.attr('id').replace('-selectized', '')).get(0).selectize
			if(sel.getValue() != '')
				return
			$('#' + o_this.attr('id').replace('-selectized', '')).get(0).selectize.setValue(o_this.attr('data-value'))
		}, 100)
	})
})

[rolandasb]

I stumbled across this issue on my Rails+Stimulus setup as well. I assume the issue is with turbolinks caching. What fixed it for me was destroying selectize instance when navigating away:

disconnect() {
  this.select[0].selectize.destroy()
}

(you could try using turbolinks:before-cache instead of disconnect if you don't use Stimulus)

[carpe171]

I'm seeing this even when turbolinks cache is off, and for newly introduced elements. This seems to fix it:

document.addEventListener("turbolinks:before-render", function() {
  if (Selectize.$testInput) {
    delete Selectize.$testInput;
  }
});

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[halloei]

The issue only occurs when I navigate around

That was exactly the behaviour I experienced. I solved this issue by destroying the selectized elements when leaving a page:

$('.selectized').each(function () {
    this.selectize.destroy();
});