custom clear function

src/ui/components/common/DirInput.tsx

@@ -14,6 +14,7 @@ interface IProps {
   readonly?: boolean
   placeholder?: string
   folder?: boolean
+  customClearBehaviour?: () => void
 }
 
 interface IState {
@@ -95,6 +96,7 @@ export default class DirInput extends React.Component<IProps, IState> {
 
             if (this.props.onChange) this.props.onChange(text)
           }}
+          customClearBehaviour={this.props.customClearBehaviour}
         />
         <div className="FileSelectIcon" onClick={this.handleIconClick}>
           <img src={File} />

src/ui/components/common/TextInput.tsx

@@ -11,6 +11,7 @@ interface IProps {
   readOnly?: boolean;
   id?: string;
   clearable?: boolean;
+  customClearBehaviour?: () => void;
   style?: {
     [key: string]: any;
   }
@@ -51,6 +52,10 @@ export default class TextInput extends React.Component<IProps, IState> {
         {
           this.props.clearable ?
             <div className="TextClear" onClick={() => {
+              // Run custom behaviour first
+              console.log('cleared')
+              if (this.props.customClearBehaviour) return this.props.customClearBehaviour()
+
               this.setState({ value: '' })
     
               if (this.props.onChange) this.props.onChange('')

src/ui/components/menu/Options.tsx

@@ -154,7 +154,17 @@ export default class Options extends React.Component<IProps, IState> {
             <Tr text="options.background" />
           </div>
           <div className='OptionValue'>
-            <DirInput onChange={this.setCustomBackground} value={this.state?.bg_url_or_path} extensions={['png', 'jpg', 'jpeg']} readonly={false} />
+            <DirInput
+              onChange={this.setCustomBackground}
+              value={this.state?.bg_url_or_path}
+              extensions={['png', 'jpg', 'jpeg']}
+              readonly={false}
+              clearable={true}
+              customClearBehaviour={async () => {
+                await setConfigOption('customBackground', '')
+                window.location.reload()
+              }}
+            />
           </div>
         </div>