Tagify: Tagify Outside with React

[conquext]

Great package here but I am having a hard time implementing the tagify outside using react. I saw the example with vanilla javascript. Could you do one with React?
Would really appreciate it.

[yairEO]

I will try to make an example and let you know

[yairEO]

I've made it work, but it requires an update to the Tagify code, which I will push soon, hopefully tomorrow.

The visual aspect of placing the input outside can be done with CSS alone, but the problem is the placement of the suggestions dropdown, which is attached to the whole component, so when the input is placed outside of the (Tagify) component, then the dropdown looks misplaced.

This required me to update the dropdown.position setting with a new String value:

dropdown: {
  position: "input"
}

This will render the suggestions dropdown relative to Tagify's input element.

---

The required CSS modifications are:

.tagify{
    border: 0;
}

.tagify__input{
  order: -1; /* place the input before all other tags */
  flex: 100%; /* occupy all the horizontal space */
  border: 1px solid var(--tags-border-color); 
  transition: .1s; /* have nicer border transitions */
}

.tagify__input:hover{ 
  border-color: var(--tags-hover-border-color); 
}

.tagify--focus .tagify__input{
  transition: 0s;
  border-color: var(--tags-focus-border-color);
}

[conquext]

@yairEO I thought as much but was hoping you probably have a working example (that could save the stress). Thanks for the help.