<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:inplaceSelect</keyword>
        </keywordset>
    </sectioninfo>
    <section>
        <title>Description</title>
        <para>The <emphasis role="bold">
            <property>&lt;rich:inplaceSelect&gt;</property>
        </emphasis> is used for creation select based inputs: it shows the value as text in one state and enables editing the value, providing a list of options in another state</para>
        
        <figure>
            <title>Three states of <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> component</title>
            <mediaobject> 
                <imageobject>
                    <imagedata fileref="images/inplaceSelect_init.png"/> 
                </imageobject>
            </mediaobject>
        </figure>
    </section>
    <section>
        <title>Key Features</title> 
        <itemizedlist>
            <listitem>
                <para>View/changed/edit states highly customizable representations</para>
            </listitem>
            <listitem>
                <para>Optional &quot;inline&quot; or &quot;block&quot; element rendering on a page</para>
            </listitem>
            <listitem>
                <para>Changing state event customization</para>
            </listitem>
            <listitem>
                <para>Possibility to call custom JavaScript function on state changes</para>
            </listitem>
            <listitem>
                <para>Edit mode activation when the component got focus with the &quot;Tab&quot;</para>
            </listitem>
            <listitem>
                <para>Sizes synchronizations between modes</para>
            </listitem>
            <listitem>
                <para>Highly customizable look and feel</para>
            </listitem>
        </itemizedlist>  
    </section>
</section>