update-

package.json

 {
 	"name": "boxdialer",
-	"version": "4.5.8",
+	"version": "4.5.9",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/components/CallHistoryInputDropdown/index.jsx

@@ -32,7 +32,7 @@ const CallHistoryInputDropdown = ({
 		if (numberSelectHistory > 0) {
 			setModal(true);
 		} else if (numberSelectHistory == 0 || numberSelectHistory == 'zero') {
-			setModal(false);
+			// setModal(false);
 		}
 	}, [numberSelectHistory]);
 
@@ -42,6 +42,10 @@ const CallHistoryInputDropdown = ({
 			.scrollTo(document.getElementById('numbersDiv').scrollWidth, 0);
 	}, [inputValue]);
 
+	console.log('input_modal: ', modal, numberSelectHistory);
+	document.querySelector('body').addEventListener('click', function (e) {
+		console.log('body_clicked_2: ', e);
+	});
 	return (
 		<Block>
 			<Input
@@ -71,6 +75,7 @@ const CallHistoryInputDropdown = ({
 						</ModalDropDown.Inset>
 					</ModalDropDown>
 					<ModalDropDown.FullWindow
+						id='full-size'
 						visiblevalue={modal}
 						onClick={() => setModal(!modal)}
 					/>

src/components/CallHistoryInputDropdown/style.js

@@ -150,12 +150,8 @@ ModalDropDown.Item = styled.div`
 `;
 ModalDropDown.FullWindow = styled.div`
 	display: ${({ visiblevalue }) => (visiblevalue ? 'block' : 'none')};
-	position: fixed;
-	left: 0;
-	top: 0;
-	z-index: 10;
-	width: 100%;
-	height: 100vh;
+	/* width: 100%;
+	height: 100%; */
 `;
 
 export { Input, ModalDropDown };

src/components/DropDown/style.js

@@ -35,6 +35,7 @@ DropDownStyle.Window = styled.div`
 	left: 0;
 	width: 100vw;
 	height: 100vh;
+	z-index: 99999999;
 `;
 DropDownStyle.DropDown = styled.div`
 	z-index: 99999999999;

src/components/ModalPhoneNumpad/index.jsx

@@ -210,12 +210,26 @@ const ModalPhoneNumpad = ({
 		setNumberSelectHistory('zero');
 	};
 
+	document.querySelector('body').addEventListener('click', () => {
+		console.log('body_clicked');
+	});
+
 	return (
 		<ModalPhoneNumpadStyle
 			position={position}
 			hiddenValue={!phoneModal}
 			variant={variant}
 			onClick={(e) => e.stopPropagation()}>
+			{/* <div
+				style={{
+					background: 'red',
+					position: 'fixed',
+					top: '0',
+					left: '0',
+					width: '100%',
+					height: '100vh',
+					zIndex: '99999999',
+				}}></div> */}
 			<ModalPhoneNumpadStyle.InputArea>
 				<CallHistoryInputDropdown
 					call_history={call_history}
@@ -286,6 +300,10 @@ const ModalPhoneNumpad = ({
 									))}
 								</NumberButton.CallButtonModalInset>
 							</NumberButton.CallButtonModal>
+							{/* <ModalPhoneNumpadStyle.Window
+								visiblevalue={exNum}
+								onClick={() => setExNum(false)}
+							/> */}
 						</NumberButton>
 					</>
 				) : (

src/components/ModalPhoneNumpad/style.js

@@ -20,8 +20,8 @@ const ModalPhoneNumpadStyle = styled.div`
 	${({ hiddenValue, position, variant }) =>
 		hiddenValue
 			? boxDialerWidjetPosition[variant][position].numpad.hidden
-			: boxDialerWidjetPosition[variant][position].numpad.seen}
-	border-radius: 20px;
+			: boxDialerWidjetPosition[variant][position].numpad
+					.seen} /* border-radius: 20px; */
 	padding: 15px;
 	display: grid;
 	grid-template-rows: 40px 1fr;
@@ -184,6 +184,7 @@ NumberButton.CallButton = styled.div`
 `;
 NumberButton.CallButtonModal = styled.div`
 	position: absolute;
+	z-index: 99999999999;
 	width: 130px;
 	height: 160px;
 	bottom: 40px;
@@ -252,6 +253,19 @@ NumberButton.CallButtonModalInset = styled.div`
 NumberButton.Icon = styled.div`
 	font-size: 20px;
 `;
-
+ModalPhoneNumpadStyle.Window = styled.div`
+	display: ${({ visiblevalue }) => (visiblevalue == 1 ? 'block' : 'none')};
+	position: fixed !important;
+	bottom: 0 !important;
+	right: 0 !important;
+	width: 100vw !important;
+	height: 100vh !important;
+	z-index: 999999 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	box-sizing: border-box !important;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+`;
 export { NumberButton, Input };
 export default ModalPhoneNumpadStyle;

src/index.css

+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
 .nocopy {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

src/lib/boxDIaler.js

@@ -168,7 +168,9 @@ export class BoxDialer {
 			},
 			failed: (e) => {
 				console.log('%c failed', 'font-size: 22px; color: green;', e);
-				if (e?.cause) toast.error(e?.cause);
+				if (e?.cause) {
+					toast.error(e?.cause);
+				}
 				// console.log('call failed with cause: ' + e.data);
 				this.closeBxCall();
 				this.onSipStateChange.innerCallerModal({