Etch and TextEditor.onDidStopChanging


Hi everyone,

I’m currently creating a package that has a view for displaying documentation. I was using JS to create it (with document.createElement) but the code was really horrible so I recently decided to use etch.

In one of my view, I display a list of all the installed packages and I would like to filter it in real time using a mini atom-text-editor. I was using the onDidStopChanging method before, but I don’t know how to achieve that now that I’m using JSX. Here the code I use.

import EtchComponent from '../etch-component' // Pasted from etch's
import { TextEditor } from 'atom'

export default class Home extends EtchComponent {
  constructor (props, children) {
    super(props, children)
    this.updateSearch = this.updateSearch.bind(this)

  updateSearch () { = this.refs.filterEditor.getModel().getText()

  render () {
    // Fake data
    const files = [
         path: 'foo.vapi'
        path: 'bar.vapi'
    const filter = || ''

    const packages = files.filter(f => {
      return !filter || filter === '' || f.path.includes(filter)

    return <div>
      <h1>Vala documentation</h1>
      <TextEditor placeholderText='Filter packages' mini={true} ref='filterEditor'/> // How to use onDidStopChanging here?
      // Display the list
      <ul className='list-group'>{
 => {
            return <li className='list-item' onclick={this.props.onLoad} item={p}>{path.basename(p.path, '.vapi')}</li>

  destroy () {

Could you help me, please. Thanks. :slight_smile:


It looks like you want to create a reference to the TextEditor:


Thanks for your answer but it doesn’t seems to work. I added this after calling etch.initialize in my constructor.

this.refs.filterEditor.onDidStopChanging(() => { this.updateSearch() })

But it doesn’t do anything.

When I put a breakpoint here, this.refs.filterEditor is an instance of TextEditor, but when I try to call some methods from the dev tools console, nothing happens.


That’s really strange. In an other view it just works fine. I really don’t understand where I made a mistake…


I didn’t changed anything related to that, but it works now. It is really strange… My problem is solved, thank you for your help. :slight_smile: