TagInput标记输入 - Mutli行输入字段

Question

如果您没有完整的回复，我将很乐意接受指导/指示/想法。

我目前正致力于更新使用React构建的电子邮件系统和Blueprint JS的元素。

在电子邮件对话框中，我尝试使用BlueprintJS / labs的TagInput将To和CC字段从文本输入移动到TagInput系统。

http://blueprintjs.com/docs/v1/#labs/tag-input

您将在上面链接中包含的示例中看到，他们的TagInput字段将允许您向输入字段添加新标记。一旦这些标签的长度超过输入字段的宽度，它就会在输入字段中添加一个新行，并允许您继续添加标签。

据我所知，输入字段通常不允许多行。

如何实现这一目标？在我目前的代码中，一旦标签超出输入字段的宽度，它将继续在输入下方的新行上添加新标签，但是，它不会增加输入字段的高度以进行补偿。 （使标签的外观神奇地漂浮在输入之外，悬停在＆amp;阻碍其他内容。）

下图显示了效果。 （CC字段是TagInput - 如您所见，第一行下面的标记只是'悬停在空间中'并覆盖主题字段，最后向下移动以覆盖电子邮件正文。）

TagInput简单定义..

<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'
/>

另外，我有一点修改过的CSS

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

感谢所有帮助：）

如果您没有完整的回复，我将很乐意接受指导/指示/想法。

Answer 1

关于TagInput实现的一些注意事项：它实际上不是<input>元素，只是看起来像一个！该组件实际上是一个div标记，最后有一个<input>，您可以输入。

组件的默认样式允许其高度增长以适合内容，内容可能会换行到多行。

您的屏幕截图表明您的应用有一些样式（上面没有引用）会阻止TagInput按预期增长，因此代码会溢出并覆盖下面的内容。