--- a/devtools/client/responsive.html/components/device-modal.js
+++ b/devtools/client/responsive.html/components/device-modal.js
@@ -33,32 +33,46 @@ module.exports = createClass({
   },
 
   componentDidMount() {
     window.addEventListener("keydown", this.onKeyDown, true);
   },
 
   componentWillReceiveProps(nextProps) {
     let {
+      devices: oldDevices,
+    } = this.props;
+    let {
       devices,
     } = nextProps;
 
-    for (let type of devices.types) {
-      for (let device of devices[type]) {
-        this.setState({
-          [device.name]: device.displayed,
-        });
+    // Refresh component state only when model transitions from closed to open
+    if (!oldDevices.isModalOpen && devices.isModalOpen) {
+      for (let type of devices.types) {
+        for (let device of devices[type]) {
+          this.setState({
+            [device.name]: device.displayed,
+          });
+        }
       }
     }
   },
 
   componentWillUnmount() {
     window.removeEventListener("keydown", this.onKeyDown, true);
   },
 
+  onAddCustomDevice(device) {
+    this.props.onAddCustomDevice(device);
+    // Default custom devices to enabled
+    this.setState({
+      [device.name]: true,
+    });
+  },
+
   onDeviceCheckboxChange({ nativeEvent: { button }, target }) {
     if (button !== 0) {
       return;
     }
     this.setState({
       [target.value]: !this.state[target.value]
     });
   },
@@ -108,21 +122,24 @@ module.exports = createClass({
       onUpdateDeviceModal(false);
     }
   },
 
   render() {
     let {
       deviceAdderViewportTemplate,
       devices,
-      onAddCustomDevice,
       onRemoveCustomDevice,
       onUpdateDeviceModal,
     } = this.props;
 
+    let {
+      onAddCustomDevice,
+    } = this;
+
     const sortedDevices = {};
     for (let type of devices.types) {
       sortedDevices[type] = Object.assign([], devices[type])
         .sort((a, b) => a.name.localeCompare(b.name));
     }
 
     return dom.div(
       {

--- a/devtools/client/responsive.html/test/browser/browser_device_custom.js
+++ b/devtools/client/responsive.html/test/browser/browser_device_custom.js
@@ -48,22 +48,22 @@ addRDMTask(TEST_URL, function* ({ ui }) 
 
   info("Fill out device adder form and save");
   setDeviceAdder(ui, device);
   let adderSave = document.querySelector("#device-adder-save");
   let saved = waitUntilState(store, state => state.devices.custom.length == 1);
   Simulate.click(adderSave);
   yield saved;
 
-  info("Enable device in modal");
+  info("Verify device defaults to enabled in modal");
   let deviceCb = [...document.querySelectorAll(".device-input-checkbox")].find(cb => {
     return cb.value == device.name;
   });
   ok(deviceCb, "Custom device checkbox added to modal");
-  deviceCb.click();
+  ok(deviceCb.checked, "Custom device enabled");
   Simulate.click(submitButton);
 
   info("Look for custom device in device selector");
   let selectorOption = [...deviceSelector.options].find(opt => opt.value == device.name);
   ok(selectorOption, "Custom device option added to device selector");
 });
 
 addRDMTask(TEST_URL, function* ({ ui }) {