make filename input uncontrolled

components/Editor.js

@@ -231,10 +231,10 @@ class Editor extends React.Component {
     }
   }
 
-  export(format = 'png') {
+  export(format = 'png', options = {}) {
     const link = document.createElement('a')
 
-    const prefix = this.state.filename || 'carbon'
+    const prefix = options.filename || 'carbon'
 
     return this.getCarbonImage({ format, type: 'blob' }).then(url => {
       if (format !== 'open') {

components/ExportMenu.js

@@ -45,14 +45,19 @@ const CopyEmbed = withRouter(({ router: { asPath }, mapper, title, margin }) =>
 const popoutStyle = { width: '280px', right: 0 }
 
 class ExportMenu extends React.PureComponent {
+  input = React.createRef()
+
   handleInputChange = ({ target: { name, value } }) => this.props.onChange(name, value)
 
   handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize)
 
-  handleExport = format => () => this.props.export(format)
+  handleExport = format => () =>
+    this.props.export(format, {
+      filename: this.input.current.value
+    })
 
   render() {
-    const { exportSize, filename, isVisible, toggleVisibility, disablePNG } = this.props
+    const { exportSize, isVisible, toggleVisibility, disablePNG } = this.props
 
     return (
       <div className="export-menu-container" id="export-menu">
@@ -77,14 +82,7 @@ class ExportMenu extends React.PureComponent {
         >
           <div className="export-row">
             <span className="filename">File name</span>
-            <Input
+            <Input ref={this.input} title="filename" placeholder="carbon" color={COLORS.PURPLE} />
-              title="filename"
-              placeholder="carbon"
-              value={filename}
-              name="filename"
-              onChange={this.handleInputChange}
-              color={COLORS.PURPLE}
-            />
           </div>
           <div className="export-row">
             <span>Size</span>

components/Input.js

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { COLORS } from '../lib/constants'
 
-const Input = ({
+const Input = React.forwardRef(
+  (
+    {
       accept,
       color = COLORS.SECONDARY,
       name,
@@ -13,10 +15,13 @@ const Input = ({
       value,
       align = 'right',
       maxLength
-}) => {
+    },
+    ref
+  ) => {
     return (
       <React.Fragment>
         <input
+          ref={ref}
           type={type}
           accept={accept}
           title={title}
@@ -54,6 +59,7 @@ const Input = ({
         </style>
       </React.Fragment>
     )
-}
+  }
+)
 
 export default Input

pages/index.js

@@ -26,7 +26,7 @@ class Index extends React.Component {
       updateRouteState(this.props.router, state)
       saveSettings(
         localStorage,
-        omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename', 'themes'])
+        omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'themes'])
       )
     },
     750,