github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-02 06:53:47 +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]; if (tags.indexOf(this.index) === -1) this.index = tags[0];
const inputWidth = Math.max(extractText(this.getInstruction(primaryCount, secondaryCount)).length, this.filter().length);
return [ return [
<div className="Modal-body"> <div className="Modal-body">
<div className="TagDiscussionModal-form"> <div className="TagDiscussionModal-form">
<div className="TagDiscussionModal-form-input"> <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"> <span className="TagsInput-selected">
{this.selected.map(tag => {this.selected.map(tag =>
<span className="TagsInput-tag" onclick={() => { <span className="TagsInput-tag" onclick={() => {
@ -166,6 +170,7 @@ export default class TagDiscussionModal extends Modal {
<input className="FormControl" <input className="FormControl"
placeholder={extractText(this.getInstruction(primaryCount, secondaryCount))} placeholder={extractText(this.getInstruction(primaryCount, secondaryCount))}
value={this.filter()} value={this.filter()}
style={{ width: inputWidth + 'ch' }}
oninput={m.withAttr('value', this.filter)} oninput={m.withAttr('value', this.filter)}
onkeydown={this.navigator.navigate.bind(this.navigator)} onkeydown={this.navigator.navigate.bind(this.navigator)}
onfocus={() => this.focused = true} onfocus={() => this.focused = true}

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

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