github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-01 22:43:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix tag selection input on discussion modal going out of screen (#83)

Browse Source 
Calculate width of input field dynamically based on content, this fixes the bug by only shifting tags out of view when necessary
This commit is contained in:
Alexander Skvortsov 2020-05-31 12:39:42 -04:00 committed by GitHub
parent cda9ed9fca
commit 274f31b6bf
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
extensions/tags/js/src/forum/components/TagDiscussionModal.js
View File

@ -148,11 +148,15 @@ export default class TagDiscussionModal extends Modal {
if (tags.indexOf(this.index) === -1) this.index = tags[0];
const inputWidth = Math.max(extractText(this.getInstruction(primaryCount, secondaryCount)).length, this.filter().length);
return [
<div className="Modal-body">
<div className="TagDiscussionModal-form">
<div className="TagDiscussionModal-form-input">
<div className={'TagsInput FormControl ' + (this.focused ? 'focus' : '')}>
<div className={'TagsInput FormControl ' + (this.focused ? 'focus' : '')}
onclick={() => this.$('.TagsInput input').focus()}
>
<span className="TagsInput-selected">
{this.selected.map(tag =>
<span className="TagsInput-tag" onclick={() => {
@ -166,6 +170,7 @@ export default class TagDiscussionModal extends Modal {
<input className="FormControl"
placeholder={extractText(this.getInstruction(primaryCount, secondaryCount))}
value={this.filter()}
style={{ width: inputWidth + 'ch' }}
oninput={m.withAttr('value', this.filter)}
onkeydown={this.navigator.navigate.bind(this.navigator)}
onfocus={() => this.focused = true}

3
extensions/tags/less/forum/TagDiscussionModal.less
View File

@ -44,6 +44,7 @@
padding-bottom: 0;
overflow: hidden;
height: auto;
cursor: text;
input {
display: inline;
@ -51,7 +52,7 @@
margin-top: -2px;
border: 0 !important;
padding: 0;
width: 100%;
max-width: 100%;
margin-right: -100%;
background: transparent !important;
}