Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Fixing MM-14886 without moving back the input inside the menu #2616

Merged
merged 2 commits into from
Apr 6, 2019
Merged

Fixing MM-14886 without moving back the input inside the menu #2616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb535d3
Revert "MM-14886 Move file input back to be child of button (#2614)"
jespino Apr 4, 2019
3adc738
Fixing original bug without the need of moving the input inside again
jespino Apr 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions components/file_upload/file_upload.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -564,6 +564,10 @@ export default class FileUpload extends PureComponent {
this.setState({menuOpen: false});
}

simulateInputClick = () => {
this.fileInput.current.click();
}

render() {
const {formatMessage} = this.context.intl;
let multiple = true;
Expand Down Expand Up @@ -620,6 +624,16 @@ export default class FileUpload extends PureComponent {
});
bodyAction = (
<React.Fragment>
<input
aria-label={formatMessage(holders.uploadFile)}
ref={this.fileInput}
type='file'
className='file-attachment-menu-item-input'
onChange={this.handleChange}
onClick={this.handleLocalFileUploaded}
multiple={multiple}
accept={accept}
/>
<MenuWrapper>
<button
type='button'
Expand All @@ -638,22 +652,12 @@ export default class FileUpload extends PureComponent {
ariaLabel={formatMessage({id: 'file_upload.menuAriaLabel', defaultMessage: 'Upload type selector'})}
>
<li>
<a>
<a onClick={this.simulateInputClick}>
<i className='fa fa-laptop'/>
<FormattedMessage
id='yourcomputer'
defaultMessage='Your computer'
/>
<input
aria-label={formatMessage(holders.uploadFile)}
ref={this.fileInput}
type='file'
className='file-attachment-menu-item-input'
onChange={this.handleChange}
onClick={this.handleLocalFileUploaded}
multiple={multiple}
accept={accept}
/>
</a>
</li>
{pluginFileUploadMethods}
Expand Down
2 changes: 1 addition & 1 deletion sass/layout/_post.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2041,5 +2041,5 @@
position: absolute;
right: 0;
top: 0;
width: 100%;
width: 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would using visibility: hidden make more sense? Or does that have other effects that cause problems here?
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I don't trust too much in this kind of things because some browsers doesn't allow you to interact with not-visible elements, but yes, we can try with other approaches, anyway we need to test it in all the browsers (my solution works in firefox and chromium for sure)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not opposed to using width: 0 I just have the same concern that I'm not sure how all browsers will treat that and if it would still be possible to click or see somehow. I'm 0/5

}