I 217 clear right filter #220
Conversation
| render() { | ||
| const { rightPanel: { taskListFilter } } = this.props; | ||
| const matches = this.getMatchingTasks(); | ||
|
|
||
| @@ -253,6 +260,11 @@ class TaskList extends Component { | |||
| autoFocus | |||
| onChange={this.onChangeFilter} | |||
| /> | |||
| <Button className="clear-input" | |||
| onClick={ this.clearFilter } | |||
| style={{opacity: taskListFilter.length > 0 ? '' : '0', cursor: taskListFilter.length > 0 ? 'pointer' : 'default'}}> | |||
There was a problem hiding this comment.
@4xdk For obscure security reasons, please create 2 CSS classes that you want to choose between here, and select those rather than doing an inline style!
There was a problem hiding this comment.
Sure. Would you have any info on those obscure security reasons? I'm curious now how inline CSS could be a risk
|
I just watched https://m.youtube.com/watch?v=eb3suf4REyI , which provides some explicit examples of how CSS injections can lead to issues like data exfiltration from the page to another domain controlled by the attacker. |
|
I need to better understand how this CSS keylogger works: https://no-csp-css-keylogger.badsite.io |
|
Looks like there's a whole bunch of css rules for the input values (value ending with aa, ab, ac, etc) which change the background image css rule to e.g. Interesting thing about this is that it's not that reliable. Each request gets sent only once, so password such as "aaaa" sends info about "a" and "aa" being present, nothing about the latter 2 characters in it. Still, an issue of course. |
| @@ -234,6 +236,11 @@ class TaskList extends Component { | |||
| rpUpdateTaskListFilter(e.target.value); | |||
| } | |||
|
|
|||
| clearFilter = () => { | |||
| const { rpUpdateTaskListFilter } = this.props; | |||
| rpUpdateTaskListFilter(''); | |||
There was a problem hiding this comment.
@4xdk Here, please also give the text input focus so that the user can begin typing immediately.
| onClick={ this.clearFilter } | ||
| > | ||
| <FaTimes size={28} /> | ||
| </Button> |
There was a problem hiding this comment.
@4xdk Put this button just to the right of the text input (rather than floating over it), so that when the filter text is long, we don't have the issue of the text behind behind the button, know what I mean?
|
Gotcha, I meant to add padding on the field to avoid that but this sounds even better. |
As per Issue 217 - #217