update

package.json

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

src/components/CallHistoryInputDropdown/index.jsx

+/** @format */
+
+import React, { useEffect, useState } from 'react';
+import Block, { Input, ModalDropDown } from './style.js';
+
+const CallHistoryInputDropdown = ({ inputValue, call_history, selectFunc }) => {
+	const [modal, setModal] = useState(false);
+
+	useEffect(() => {
+		if (call_history.length) {
+			var elem = document.getElementById('data');
+			elem.scrollTop = elem.scrollHeight;
+		}
+	}, [call_history]);
+	const selectFuncInset = (e) => {
+		selectFunc(e);
+		setModal(false);
+	};
+	return (
+		<Block>
+			<Input
+				onClick={() => setModal(!modal)}
+				className='nocopy'
+				type='text'
+				value={inputValue}>
+				{inputValue}
+			</Input>
+			<ModalDropDown visiblevalue={modal}>
+				<ModalDropDown.Inset id='data'>
+					{call_history.reverse().map((value, index) => (
+						<p
+							className='item'
+							key={index}
+							onClick={() => selectFuncInset(value)}>
+							{value}
+						</p>
+					))}
+				</ModalDropDown.Inset>
+			</ModalDropDown>
+			<ModalDropDown.FullWindow
+				visiblevalue={modal}
+				onClick={() => setModal(!modal)}
+			/>
+		</Block>
+	);
+};
+
+export default CallHistoryInputDropdown;

src/components/CallHistoryInputDropdown/style.js

+/** @format */
+
+import styled from 'styled-components';
+
+const Block = styled.div`
+	height: 100%;
+	position: relative;
+`;
+
+const Input = styled.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+	max-height: 45px;
+	border-radius: 3px;
+	background-color: #fff;
+	border: 0;
+	padding: 0 35px 0 10px;
+	font-size: 22px;
+	color: #000;
+	display: flex;
+	align-items: center;
+
+	:focus {
+		border-color: inherit;
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		padding: 0 10px;
+		font-size: 24px;
+		outline: 0 none;
+	}
+
+	position: relative;
+	margin: 0;
+	outline: none;
+
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	/* Firefox */
+
+	&[type='number'] {
+		-moz-appearance: textfield;
+	}
+`;
+
+const ModalDropDown = styled.div`
+	width: 200px;
+	height: 150px;
+	position: absolute;
+	background-color: #c9d5d9;
+	border-radius: 20px;
+	padding: 15px;
+	transition: 0.1s;
+	z-index: 15;
+	bottom: 60px;
+	left: 50%;
+
+	${({ visiblevalue }) =>
+		visiblevalue
+			? {
+					opacity: '1',
+					transform: 'translate(-50%, 0)',
+			  }
+			: {
+					opacity: '0',
+					transform: 'translate(-50%, 0)',
+			  }}
+`;
+ModalDropDown.Inset = styled.div`
+	width: 100%;
+	height: 100%;
+	overflow-y: scroll;
+	.item {
+		font-size: 18px;
+		transition: 0.2s;
+		padding: 5px 2px;
+		margin: 3px 0;
+		border-radius: 10px;
+		:hover {
+			background-color: #00000014;
+		}
+	}
+	::-webkit-scrollbar {
+		width: 5px;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		background: #fff0;
+	}
+
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: #abaaaa;
+		border-radius: 10px;
+	}
+
+	/* Handle on hover */
+	::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+`;
+ModalDropDown.FullWindow = styled.div`
+	display: ${({ visiblevalue }) => (visiblevalue ? 'block' : 'none')};
+	position: fixed;
+	left: 0;
+	top: 0;
+	z-index: 10;
+	width: 100%;
+	height: 100vh;
+`;
+
+export { Input, ModalDropDown };
+export default Block;

src/components/DropDown/style.js

@@ -9,7 +9,6 @@ const DropDownStyle = styled.div`
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	
 `;
 DropDownStyle.Text = styled.div`
 	font-size: 22px;

src/components/ModalPhoneNumpad/index.jsx

@@ -7,6 +7,7 @@ import CallIcon from '@mui/icons-material/Call';
 import { toast } from 'react-hot-toast';
 import DropDown from '../DropDown';
 import { CommentsDisabledOutlined } from '@mui/icons-material';
+import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
 
 const ModalPhoneNumpad = ({
 	phoneModal,
@@ -128,7 +129,6 @@ const ModalPhoneNumpad = ({
 	const gameState = {
 		toggleCP: (e) => {
 			if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
-				// boxDialer.initialized(inputValue);
 				callButton();
 			} else if (
 				phoneModal &&
@@ -184,6 +184,7 @@ const ModalPhoneNumpad = ({
 				localStorage.setItem('callhistory', newCallsStringify);
 			}
 			boxDialer.initialized(inputValue);
+			setInputValue('');
 		} else {
 			toast.error('Please wait', {
 				style: {
@@ -192,6 +193,9 @@ const ModalPhoneNumpad = ({
 			});
 		}
 	};
+	const selectFunc = (e) => {
+		setInputValue(e);
+	};
 	return (
 		<ModalPhoneNumpadStyle
 			position={position}
@@ -199,7 +203,12 @@ const ModalPhoneNumpad = ({
 			variant={variant}
 			onClick={(e) => e.stopPropagation()}>
 			<ModalPhoneNumpadStyle.InputArea>
-				<Input disabled type='text' value={inputValue} />
+				{/* <Input disabled type='text' value={inputValue} /> */}
+				<CallHistoryInputDropdown
+					call_history={call_history}
+					inputValue={inputValue}
+					selectFunc={selectFunc}
+				/>
 				{inputValue.length ? (
 					<Input.BackSpaceIcon
 						onClick={() => inputController({ type: 'delete', from: 'button' })}