Index: src/stock-on-hand-mobile/pages/program-select.jsx
===================================================================
diff -u -N -r7f9ffae3458e2f9994249398a1d526a3cbe861d6 -r9bbcb50a0fd738bf96b96418ce9735988b8103b3
--- src/stock-on-hand-mobile/pages/program-select.jsx	(.../program-select.jsx)	(revision 7f9ffae3458e2f9994249398a1d526a3cbe861d6)
+++ src/stock-on-hand-mobile/pages/program-select.jsx	(.../program-select.jsx)	(revision 9bbcb50a0fd738bf96b96418ce9735988b8103b3)
@@ -14,13 +14,16 @@
  */
 
 import React, { useMemo, useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import RadioButton from '../../react-components/buttons/radio-button';
 import Select from '../../react-components/inputs/select';
 import InputWithSuggestions from '../../react-components/inputs/input-with-suggestions';
 
 const ProgramSelect = ({ offlineService }) => {
 
+    const history = useHistory();
+
     const convertIntoSelectOptions = (values) => {
       return values.map(({ id, name }) => ({ value: id, name }));
     };
@@ -36,109 +39,110 @@
     const [supervisedFacilitiesOptions, setSupervisedFacilitiesOptions] = useState([]);
 
     const radioChangeHandler = (e) => {
-      if (facilityType !== e.target.value) {
-        if (e.target.value == 'MyFacility') {
-          setFacilityId(facility.id);
-        } else {
-          setFacilityId(null);
-        }
-        setFacilityType(e.target.value);
+        setFacilityId(null);
         setProgramId(null);
-      }
+        setFacilityType(e.target.value);
     };
 
     const supervisedProgramsHandler = (value) => {
       setProgramId(value);
       setSupervisedFacilitiesOptions(supervisedFacilities[value]);
     };
 
+    const handleSearch = (programId, facilityId) => {
+      history.push(`/stockOnHand/${facilityId}/${programId}`);
+    };
+    
     const menu = document.getElementsByClassName('header ng-scope')[0];
     
     useEffect(() => {
-      setFacilityId(facility.id);
       menu.style.display = '';
-    }, [menu, programId]);
+    }, [menu]);
 
     return (
         <>
-            <div className='page-header-responsive'>
-                <h2 id='program-select-header'>
-                  Stock on Hand
-                </h2>
-            </div>
-            <div className='page-content'>
-                <label 
-                  id='facility-type-header' 
-                  style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}
-                >
-                  Facility Type
-                </label>
-                <div>
-                  <RadioButton
-                      changed={radioChangeHandler}
-                      id='1'
-                      isSelected={facilityType === 'MyFacility'}
-                      label={`My Facility `}
-                      additionalInfo={`(${facility.name})`}
-                      value='MyFacility'
-                  />
-                  <RadioButton
-                      changed={radioChangeHandler}
-                      id='2'
-                      isSelected={facilityType === 'SupervisedFacility'}
-                      label='Supervised Facility'
-                      value='SupervisedFacility'
-                      disabled={!supervisedPrograms}
-                  />
-                </div>
-                <div style={{marginTop: '8px', marginBottom: '8px'}}>
-                    <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}>
-                      <label id='facility-type-header'>
-                        Program
-                      </label>
+          <div className='page-header-responsive'>
+              <h2 id='program-select-header'>
+                Stock on Hand
+              </h2>
+          </div>
+          <div className='page-content'>
+              <label 
+                id='facility-type-header' 
+                style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}
+              >
+                Facility Type
+              </label>
+              <div>
+                <RadioButton
+                    changed={radioChangeHandler}
+                    id='1'
+                    isSelected={facilityType === 'MyFacility'}
+                    label={'My Facility'}
+                    additionalInfo={`(${facility.name})`}
+                    value='MyFacility'
+                />
+                <RadioButton
+                    changed={radioChangeHandler}
+                    id='2'
+                    isSelected={facilityType === 'SupervisedFacility'}
+                    label='Supervised Facility'
+                    value='SupervisedFacility'
+                    disabled={!supervisedPrograms}
+                />
+              </div>
+              <div style={{marginTop: '8px', marginBottom: '8px'}}>
+                  <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}>
+                    <label id='facility-type-header'>
+                      Program
+                    </label>
+                  </div>
+                  {facilityType !== 'SupervisedFacility' ? 
+                    <div className='field-full-width' style={{marginBottom: '8px'}}>
+                        <Select
+                          options={programs}
+                          onChange={(value) => {
+                              setProgramId(value); 
+                              setFacilityId(facility.id)
+                          }}
+                        />
                     </div>
-                    {facilityType !== 'SupervisedFacility' ? 
-                      <div className='field-full-width' style={{marginBottom: '8px'}}>
-                          <Select
-                            options={programs}
-                            onChange={value => setProgramId(value)}
-                          />
+                  :
+                    <>
+                    <div className='field-full-width' style={{marginBottom: '8px'}}>
+                      <Select
+                        options={supervisedPrograms}
+                        onChange={supervisedProgramsHandler}
+                      />
+                    </div>
+                      <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}> 
+                        <label 
+                          id='facility-type-header'
+                        >
+                          Facility
+                        </label>
                       </div>
-                    :
-                      <>
                       <div className='field-full-width' style={{marginBottom: '8px'}}>
-                        <Select
-                          options={supervisedPrograms}
-                          onChange={supervisedProgramsHandler}
+                        <InputWithSuggestions 
+                          data={supervisedFacilitiesOptions}
+                          displayValue='name'
+                          onClick={value => setFacilityId(value.id)}
+                          sortFunction={(a, b) => a.name.localeCompare(b.name)}
                         />
                       </div>
-                        <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}> 
-                          <label 
-                            id='facility-type-header'
-                          >
-                            Facility
-                          </label>
-                        </div>
-                        <div className='field-full-width' style={{marginBottom: '8px'}}>
-                          <InputWithSuggestions 
-                            data={supervisedFacilitiesOptions}
-                            displayValue='name'
-                            onClick={value => setFacilityId(value.id)}
-                            sortFunction={(a, b) => a.name.localeCompare(b.name)}
-                          />
-                        </div>
-                      </> 
-                    }
-                </div>
-                <button 
-                  className='primary'
-                  type='button'
-                  style={{ marginTop: '0.5em' }}
-                  disabled={!programId || !facilityId}
-                >
-                  Search
-                </button>
-            </div>
+                    </> 
+                  }
+              </div>
+              <button 
+                className='primary'
+                type='button'
+                style={{ marginTop: '0.5em' }}
+                disabled={!programId || !facilityId}
+                onClick={() => handleSearch(programId, facilityId)}
+              >
+                Search
+              </button>
+          </div>
         </>
     );
 };