If you have any suggestions or ideas, I am open to receiving guidance even if it's not a complete solution.
Currently, I am in the process of updating an Email system that was created using React and elements from Blueprint JS.
In the email dialog box, my goal is to transition the To and CC fields from a plain text input to a TagInput system utilizing BlueprintJS/labs' TagInput component.
You can refer to the example provided in the link below:
This TagInput allows for adding new tags dynamically, and as they exceed the width of the input field, it automatically creates a new line to accommodate more tags. However, traditional input fields do not usually support multiline text.
I am facing an issue where, in my implementation, new tags are added on separate lines but without adjusting the height of the input field accordingly. This causes the tags to appear detached from the input field and overlapping other content.
The image below illustrates this problem (the CC field represents the TagInput):
https://i.sstatic.net/9D687.jpg
The TagInput element in my code is defined as follows:
<TagInput
className='pt-fill pt-input-ghost'
onChange={(cc: string[]) => this.setState({cc})}
values={this.state.cc}
inputValue={this.state.cc_input}
placeholder='CC:'
leftIconName='document-share'
/>
Additionally, I have made some CSS modifications to address the issue:
.pt-input{
overflow-wrap: break-word;
}
.pt-tag-input{
padding-bottom: 2px;
}
.pt-tag {
margin-bottom: 2px;
margin-left: 2px;
}
.pt-tag-input-icon{
margin-right: 2px;
}
.pt-input-ghost{
border:none;
outline-style:none;
outline:none;
box-shadow:none;
border-color:transparent;
margin: 2px 0px;
background-color:transparent;
}
.pt-input-ghost:focus{
border:none;
outline-style:none;
outline:none;
box-shadow:none;
border-color:transparent;
background-color:transparent;
width: auto;
}
Thank you for any assistance provided :)
Once again, I am open to receiving guidance or ideas if a complete solution is not available.