-try again to get the amount entry to work, still failing

2 files changed, 60 insertions, 34 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index 42ea47e..7d1a9af 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -1252,39 +1252,45 @@ function WalletWithdraw(Props: any): VNode {
   let submitAmount = '5.00'; // must match the first <select> child.
   // const amountRegex = "^[0-9]+(\.[0-9]+)?$"; // currently unused
 
-  /* FIXME: Amount entry shows white-on-white! */
   return (
         <div id="reserve-form"
           class="pure-form"
           name="tform">
           <p>
           {i18n`Amount to withdraw:`}&nbsp;
-          <div class="dropdown">
-          <input
-            type="text"
-            id="reserve-amount"
-            name="withdraw-amount"
-            class="amount" autofocus
-            onChange={(e): void => {
-              submitAmount = e.currentTarget.value;
-            }} />
+          <div class="select-editable">
           <select onChange={(e): void => {
               // @ts-ignore
-              this.previousElementSibling.value=this.value; this.previousElementSibling.focus()
+              var ra : any = document.getElementById("reserve-amount");
+              // @ts-ignore
+              ra.value=this.value;
+              ra.focus();
             }}>
             <option value="5.00">5.00</option>
             <option value="10.00">10.00</option>
             <option value="15.00">15.00</option>
             <option value="20.00">20.00</option>
           </select>
+          <input
+            type="text"
+            id="reserve-amount"
+            name="withdraw-amount"
+            class="amount" autofocus
+            onChange={(e): void => {
+              submitAmount = e.currentTarget.value;
+            }} />
           &nbsp;
           <input
             type="text"
             readonly
             class="currency-indicator"
             size={currency.length}
+            maxLength={currency.length}
             tabIndex={-1} value={currency} />
           </div>
+          </p>
+          <p>
+          <div>
           <input
              id="select-exchange"
              class="pure-button pure-button-primary"
@@ -1304,6 +1310,7 @@ function WalletWithdraw(Props: any): VNode {
                   pageStateSetter
                )
             }} />
+          </div>
           </p>
         </div>
   )
@@ -1324,7 +1331,7 @@ function PaymentOptions(Props: any): VNode {
   return (<article>
     <div class="payments">
       <div class="tab">
-        <button class="tablinks"
+        <button class="tablinks active"
           onClick={(e: MouseEvent): void => {OpenPayTab(e, 'charge-wallet')}}>
           {i18n`Charge Taler wallet`}
         </button>
@@ -1333,7 +1340,7 @@ function PaymentOptions(Props: any): VNode {
           {i18n`Wire to bank account`}
         </button>
       </div>
-      <div id='charge-wallet' class='tabcontent'>
+      <div id='charge-wallet' class='tabcontent active'>
         <h3>{i18n`Charge Taler wallet`}</h3>
         <WalletWithdraw
            backendState={backendState}
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index f6d32d6..3023831 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -42,7 +42,6 @@ input[type="number"]::-webkit-inner-spin-button {
 /* This CSS code styles the tab */
 .tab {
     overflow: hidden;
-    border: 2px solid #fffccc;
 }
 
 .logout {
@@ -54,6 +53,7 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .tab button {
     background-color: orange;
+    color: black;
     float: left;
     border: none;
     outline: none;
@@ -64,10 +64,12 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .tab button:hover {
     background-color: #dfdfdf;
+    color: black;
 }
 
 .tab button.active {
     background-color: #fcfcfc;
+    color: black;
 }
 
 .tabcontent {
@@ -77,6 +79,10 @@ input[type="number"]::-webkit-inner-spin-button {
     border-top: none;
 }
 
+.tabcontent.active {
+    display: block;
+}
+
 input[type="number"] {
     -moz-appearance: textfield;
     color: white;
@@ -110,10 +116,42 @@ input[type="number"] {
  */
 #main .currency-indicator {
   color: black;
-  display: inline-block;
   border-radius: 0px 4px 4px 0px;
+  position: relative;
+}
+
+.select-editable {
+    position:relative;
+    background-color:white;
+    border:solid grey 1px;
+    width:120px;
+    height:18px;
+}
+
+.select-editable select {
+    position:absolute;
+    top:0px;
+    left:0px;
+    font-size:14px;
+    border:none;
+    width:120px;
+    margin:0;
+}
+.select-editable input {
+    position:absolute;
+    top:0px;
+    left:0px;
+    width:100px;
+    padding:1px;
+    font-size:12px;
+    border:none;
+}
+.select-editable select:focus,
+.select-editable input:focus {
+    outline:none;
 }
 
+
 #main .fieldlabel {
   display: block;
   padding-bottom: 0.5em;
@@ -171,22 +209,3 @@ html {
     background: #2a2a2a;
     color: #ffffff;
 }
-
-.dropdown {
-  position: relative;
-  width: 200px;
-}
-
-.dropdown select {
-  width: 100%;
-}
-
-.dropdown > * {
-  box-sizing: border-box;
-  height: 1.5em;
-}
-
-.dropdown input {
-  position: absolute;
-  width: calc(100% - 20px);
-}