diff --git a/client/src/components/CategoriesSelectList.js b/client/src/components/CategoriesSelectList.js
index 1b7022bed..541c2d813 100644
--- a/client/src/components/CategoriesSelectList.js
+++ b/client/src/components/CategoriesSelectList.js
@@ -2,12 +2,17 @@ import React, { useCallback } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import { ListSelect } from 'components';
 import { MenuItem } from '@blueprintjs/core';
+import { saveInvoke } from 'utils';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
 export default function CategoriesSelectList({
   categoriesList,
   selecetedCategoryId,
   defaultSelectText = <T id={'select_category'} />,
   onCategorySelected,
+  popoverFill = false,
+  className,
   ...restProps
 }) {
   
@@ -23,9 +28,10 @@ export default function CategoriesSelectList({
   };
 
   const handleItemCategorySelected = useCallback(
-    (ItemCategory) => onCategorySelected && onCategorySelected(ItemCategory),
-    [],
+    (ItemCategory) => saveInvoke(onCategorySelected, ItemCategory),
+    [onCategorySelected],
   );
+
   const categoryItem = useCallback(
     (item, { handleClick }) => (
       <MenuItem key={item.id} text={item.name} onClick={handleClick} />
@@ -43,6 +49,10 @@ export default function CategoriesSelectList({
       onItemSelect={handleItemCategorySelected}
       itemPredicate={filterItemCategory}
       itemRenderer={categoryItem}
+      popoverProps={{ minimal: true,  usePortal: !popoverFill }}
+      className={classNames('form-group--select-list', {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      }, className)}
       {...restProps}
     />
   );
diff --git a/client/src/components/ContactSelecetList.js b/client/src/components/ContactSelecetList.js
index 0ada30189..baa4b2a20 100644
--- a/client/src/components/ContactSelecetList.js
+++ b/client/src/components/ContactSelecetList.js
@@ -2,13 +2,15 @@ import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import { ListSelect } from 'components';
 import { MenuItem } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
 export default function ContactSelecetList({
   contactsList,
   selectedContactId,
   defaultSelectText = <T id={'select_contact'} />,
   onContactSelected,
-  // disabled = false,
+  popoverFill = false,
   ...restProps
 }) {
   const [selecetedContact, setSelectedContact] = useState(null);
@@ -56,8 +58,10 @@ export default function ContactSelecetList({
       onItemSelect={onContactSelect}
       itemPredicate={FilterContacts}
       itemRenderer={handleContactRenderer}
-      popoverProps={{ minimal: true }}
-      className={'form-group--select-list'}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
       {...restProps}
     />
   );
diff --git a/client/src/components/ContactsListField.js b/client/src/components/ContactsListField.js
index 39a07d739..6668b9de5 100644
--- a/client/src/components/ContactsListField.js
+++ b/client/src/components/ContactsListField.js
@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
-import { MenuItem, Button } from '@blueprintjs/core';
+import { MenuItem } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import ListSelect from 'components/ListSelect';
 import { FormattedMessage as T } from 'react-intl';
 
@@ -9,6 +11,7 @@ export default function ContactsListField({
   selectedContactId,
   selectedContactType,
   defautlSelectText = <T id={'select_contact'} />,
+  popoverFill = false,
 }) {
   // Contact item of select accounts field.
   const contactRenderer = useCallback(
@@ -39,13 +42,16 @@ export default function ContactsListField({
       items={items}
       noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={contactRenderer}
-      popoverProps={{ minimal: true }}
       filterable={true}
       onItemSelect={onContactSelect}
       labelProp={'display_name'}
       selectedItem={`${selectedContactId}_${selectedContactType}`}
       selectedItemProp={'_id'}
       defaultText={defautlSelectText}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
     />
   );
 }
diff --git a/client/src/components/DataTableCells/ItemsListCell.js b/client/src/components/DataTableCells/ItemsListCell.js
index c8b41dbfd..5a64203bd 100644
--- a/client/src/components/DataTableCells/ItemsListCell.js
+++ b/client/src/components/DataTableCells/ItemsListCell.js
@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
 
-function ItemsListCell({
-  column: { id },
+export default function ItemsListCell({
+  column: { id, filterSellable, filterPurchasable },
   row: { index },
   cell: { value: initialValue },
   payload: { items, updateData, errors },
@@ -28,9 +28,9 @@ function ItemsListCell({
         items={items}
         onItemSelected={handleItemSelected}
         selectedItemId={initialValue}
+        sellable={filterSellable}
+        purchasable={filterPurchasable}
       />
     </FormGroup>
   );
 }
-
-export default ItemsListCell;
diff --git a/client/src/components/ItemsListField.js b/client/src/components/ItemsListField.js
index a67fb8569..495772c9a 100644
--- a/client/src/components/ItemsListField.js
+++ b/client/src/components/ItemsListField.js
@@ -8,8 +8,23 @@ function ItemsListField({
   selectedItemId,
   defautlSelectText = 'Click to select an item.',
   onItemSelected,
+
+  sellable = false,
+  purchasable = false,
 }) {
-  const initialItem = useMemo(() => items.find((a) => a.id === initialItemId), [
+  const filteredItems = useMemo(() => {
+    let filteredItems = [...items];
+
+    if (sellable) {
+      filteredItems = filteredItems.filter((item) => item.sellable);
+    }
+    if (purchasable) {
+      filteredItems = filteredItems.filter((item) => item.purchasable);
+    }
+    return filteredItems;
+  }, [items, sellable, purchasable])
+
+  const initialItem = useMemo(() => filteredItems.find((a) => a.id === initialItemId), [
     initialItemId,
   ]);
 
@@ -18,11 +33,11 @@ function ItemsListField({
   useEffect(() => {
     if (typeof selectedItemId !== 'undefined') {
       const item = selectedItemId
-        ? items.find((a) => a.id === selectedItemId)
+        ? filteredItems.find((a) => a.id === selectedItemId)
         : null;
       setSelectedItem(item);
     }
-  }, [selectedItemId, items, setSelectedItem]);
+  }, [selectedItemId, filteredItems, setSelectedItem]);
 
   const onItemSelect = useCallback(
     (item) => {
@@ -34,7 +49,7 @@ function ItemsListField({
 
   const itemRenderer = useCallback(
     (item, { handleClick }) => (
-      <MenuItem key={item.id} text={item.name} onClick={handleClick} />
+      <MenuItem key={item.id} text={item.name} label={item.code} onClick={handleClick} />
     ),
     [],
   );
@@ -52,7 +67,7 @@ function ItemsListField({
 
   return (
     <ListSelect
-      items={items}
+      items={filteredItems}
       noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={itemRenderer}
       itemPredicate={filterItem}