diff --git a/app/components/new-message-input.hbs b/app/components/new-message-input.hbs
index 53ce932..36d6f11 100644
--- a/app/components/new-message-input.hbs
+++ b/app/components/new-message-input.hbs
@@ -5,7 +5,7 @@
     @value={{this.message}}
     id="new-message-text"
     placeholder="Type message here and hit enter"
-    autofocus="autofocus"
+    {{autofocus}}
   />
   <button type="submit">
     Send
diff --git a/app/modifiers/autofocus.js b/app/modifiers/autofocus.js
new file mode 100644
index 0000000..6afc37d
--- /dev/null
+++ b/app/modifiers/autofocus.js
@@ -0,0 +1,3 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element) => element.focus());
diff --git a/tests/integration/modifiers/autofocus-test.js b/tests/integration/modifiers/autofocus-test.js
new file mode 100644
index 0000000..c4a7bdc
--- /dev/null
+++ b/tests/integration/modifiers/autofocus-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Modifier | autofocus', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function (assert) {
+    await render(hbs`<div {{autofocus}}></div>`);
+
+    assert.ok(true);
+  });
+});